tsc 时 webpack 无法捆绑文件
Posted
技术标签:
【中文标题】tsc 时 webpack 无法捆绑文件【英文标题】:webpack not able to bundle files when tsc is 【发布时间】:2019-01-02 20:14:34 【问题描述】:我在让 webpack 构建我的文件时遇到了一些麻烦。它只是吐出一堆错误,都是相同的形式,说:
ERROR in ./node_modules/typescript-rest/dist/server.js
Module not found: Error: Can't resolve 'typescript-ioc/es6' in '/Users/Jack/NODE/ts-rest-session/node_modules/typescript-rest/dist'
它似乎没有正确加载 node_modules。
tsc 和 ts-node 都能够很好地构建/运行项目。这是我的配置:
tsconfig.json
"compilerOptions":
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"lib": ["es2015", "dom"],
"experimentalDecorators": true,
"emitDecoratorMetadata": true
webpack.config.js
module.exports =
entry:
server: './server.ts'
,
module:
rules: [
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
]
,
resolve:
modules: ["node_modules"]
extensions: ['.tsx', '.ts', '.js', '.json']
,
output:
filename: '[name].bundle.js',
path: __dirname + 'dist'
;
如果有人有任何想法,我会全力以赴!我尝试从 webpack.config.json 中 module.rules[0] 的排除中删除 node_modules
。
【问题讨论】:
【参考方案1】:如果您想根据 tsconfig.json 中的 baseUrl 和路径解析模块,则可以使用 tsconfig-paths-webpack-plugin 包。有关此功能的详细信息,请参阅模块解析文档。
此功能需要 webpack 2.1+ 和 TypeScript 2.0+。使用下面的配置或查看包以获取更多关于使用的信息。
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports =
...
resolve:
plugins: [new TsconfigPathsPlugin( /*configFile: "./path/to/tsconfig.json" */ )]
...
https://github.com/TypeStrong/ts-loader/blob/master/README.md
编辑
您似乎正在尝试为 node 构建一些东西,默认情况下 webpack 为 web 构建。所以你必须在你的 webpack.config 中放置正确的目标。此外,您在解析中缺少“,”,您的输出路径应该类似于 path: __dirname + '/dist'
我试图重现你的问题,这个配置对我来说很好:
var nodeExternals = require('webpack-node-externals');
module.exports =
mode: 'development',
entry: './server.ts',
// in order to ignore built-in modules like path, fs, etc.
target: 'node',
// in order to ignore all modules in node_modules folder
externals: [nodeExternals()],
output:
filename: 'bundle.js',
path: __dirname + '/dist'
,
// Enable sourcemaps for debugging webpack's output.
devtool: 'source-map',
resolve:
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ['.ts', '.tsx', '.js', '.json']
,
module:
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
,
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
enforce: 'pre',
test: /\.js$/,
loader: 'source-map-loader'
,
]
,
;
【讨论】:
感谢您的回答!我不想这样做 - 我想我错过了我试图根据基本 url 解析模块的步骤。有什么我可以改变的,这样我就不必使用那个插件了吗? webpack.config 和 tsconfig 都在我项目的根目录中。 我用那个配置试过了,但它仍然不起作用:(同样的错误以及一些关于“依赖项的请求是一个表达式”的警告和一些“无法解决”的警告s. 开始认为我可能不得不尝试一些不同的东西。 你能提供你的项目的复制品吗? 这是 github 上的全部内容:github.com/jack-bliss/yomi-gg 很好,我为您的项目打开了 PR,经过测试并且工作正常。还在此处编辑以在此处共享正确答案以上是关于tsc 时 webpack 无法捆绑文件的主要内容,如果未能解决你的问题,请参考以下文章
与 Webpack 捆绑时,无法使 Tether 为 Bootstrap 4 工作
无法让 webpack require.ensure 分块方法与 react-router 一起使用并生成单独的捆绑文件
webpack 如何以及在哪里使用 tsconfig.file 和 tsc