使用Webpack导入UMD内置模块会导致严重依赖错误 [英] Importing UMD built module using webpack leads to Critical Dependency errors
问题描述
我正在尝试构建一个简单的文件,该文件依赖于使用UMD导出构建的库.
I am trying to build a simple file that depends on a library built with UMD exports.
// main.ts
import { parseTree } from 'jsonc-parser';
const tree = parseTree('{ "name: "test" }');
console.log(tree);
它可以很好地编译,但是webpack会弹出依赖项错误:
It compiles fine, however webpack spits out dependency errors:
哈希:85004e3e1bd3582666f5 版本:webpack 2.3.2 时间:959ms 资产规模块名称 dist/bundle.js 61.8 kB 0 [发射]主要 build/main.d.ts 0字节[发出] [0] ./~/jsonc-parser/lib/main.js 40.1 kB {0} [内置] [1] ./~/jsonc-parser/lib 160字节{0} [内置] [2] ./~/path-browserify/index.js 6.18 kB {0} [内置] [3] ./~/process/browser.js 5.3 kB {0} [内置] [4] ./src/main.ts 200字节{0} [内置] [5] ./~/vscode-nls/lib 160字节{0} [可选] [内置] [6] ./~/vscode-nls/lib/main.js 5.46 kB {0} [内置]
Hash: 85004e3e1bd3582666f5 Version: webpack 2.3.2 Time: 959ms Asset Size Chunks Chunk Names dist/bundle.js 61.8 kB 0 [emitted] main build/main.d.ts 0 bytes [emitted] [0] ./~/jsonc-parser/lib/main.js 40.1 kB {0} [built] [1] ./~/jsonc-parser/lib 160 bytes {0} [built] [2] ./~/path-browserify/index.js 6.18 kB {0} [built] [3] ./~/process/browser.js 5.3 kB {0} [built] [4] ./src/main.ts 200 bytes {0} [built] [5] ./~/vscode-nls/lib 160 bytes {0} [optional] [built] [6] ./~/vscode-nls/lib/main.js 5.46 kB {0} [built]
./〜/jsonc-parser/lib/main.js中的警告 3:24-31关键依赖项:require函数的使用方式不能静态提取依赖项
WARNING in ./~/jsonc-parser/lib/main.js 3:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
./〜/vscode-nls/lib/main.js中的警告 118:23-44关键依赖项:依赖项的请求是一个表达式
WARNING in ./~/vscode-nls/lib/main.js 118:23-44 Critical dependency: the request of a dependency is an expression
./〜/vscode-nls/lib/main.js中的错误 找不到模块:错误:无法解析".../webpack-typescript-umd/node_modules/vscode-nls/lib"中的"fs" @ ./~/vscode-nls/lib/main.js 7:9-22 @ ./~/jsonc-parser/lib/main.js @ ./src/main.ts
ERROR in ./~/vscode-nls/lib/main.js Module not found: Error: Can't resolve 'fs' in '.../webpack-typescript-umd/node_modules/vscode-nls/lib' @ ./~/vscode-nls/lib/main.js 7:9-22 @ ./~/jsonc-parser/lib/main.js @ ./src/main.ts
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.ts',
output: {
filename: 'dist/bundle.js'
},
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: ['.ts', '.tsx', '.js'] // note if using webpack 1 you'd also need a '' in the array as well
},
module: {
loaders: [ // loaders will work with webpack 1 or 2; but will be renamed "rules" in future
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: {
configFileName: path.resolve(__dirname, 'tsconfig.json')
}
},
]
}
}
我想将已转换的js
文件保留为commonjs
,但是我也希望将jsonc-parser
捆绑在一起,而不将其重新编译为commonjs
.
I want to keep my js
transpiled files as commonjs
but I want to bundle jsonc-parser
as well without recompiling it as commonjs
.
我已经创建了在github上的存储库,用于显示错误情况.希望这可以对您有所帮助.
I've created a repo on github that show cases the error. Hopefully this can help you.
您可以简单地npm install && npm run dist
重现该错误.
You can simply npm install && npm run dist
to reproduce the error.
推荐答案
我遇到了相同的问题,想分享两种解决此问题的方法:
I ran into the same issue and wanted to share two ways to workaround the problem:
如果使用的程序包包含一个模块,就像 < jsonc-parser
的c5>版本,您可以添加以下内容到您的webpack.config.js
:
If the consumed package consists of one single module, just like before the 1.0.1
version of the jsonc-parser
, you can add the following to your webpack.config.js
:
module: {
rules: [
// your rules come here.
],
noParse: /jsonc-parser|other-umd-packages/
},
如果使用的软件包包含多个文件,则可以使用 umd-compat-loader
作为解决方法.将umd-compat-loader
加载程序添加到package.json
并在webpack.config.js
中配置以下rule
:
If the consumed package consists of multiple files, one can use the umd-compat-loader
as a workaround. Add the umd-compat-loader
loader to your package.json
and configure the following rule
in the webpack.config.js
:
module: {
rules: [
// other rules come here.
{
test: /node_modules[\\|/](jsonc-parser|other-umd-packages)/,
use: { loader: 'umd-compat-loader' }
}
]
},
可以在此处test的一些提示. >.最后,但并非最不重要的一点是,功劳归功于解决方法.
这篇关于使用Webpack导入UMD内置模块会导致严重依赖错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!