使用webpack导入UMD构建的模块会导致关键依赖错误。

Question

使用webpack导入UMD构建的模块会导致关键依赖错误。

6

我在尝试构建一个简单的文件，该文件依赖于使用UMD exports构建的库。

// main.ts
import { parseTree } from 'jsonc-parser';

const tree = parseTree('{ "name: "test" }');

console.log(tree);

它能成功编译，但是webpack会报出依赖错误：

哈希值：85004e3e1bd3582666f5 版本号：webpack 2.3.2 耗时：959ms 资源文件大小块名称块编号 dist/bundle.js 61.8 kB 0 [导出] main 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} [已构建]

警告：./~/jsonc-parser/lib/main.js 3:24-31 关键依赖：现在使用的require函数的方式无法静态提取依赖项

警告：./~/vscode-nls/lib/main.js 118:23-44 关键依赖：依赖项的请求是一个表达式

错误：./~/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

// 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。

我已经在github上创建了一个存储库，其中展示了该错误。希望这可以帮助你。

您可以简单地运行npm install && npm run dist来重现此错误。

- jtheoof

你是否查看了以下线程：https://dev59.com/_5jga4cB1Zd3GeqPRvVh - knee-cola

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kittaakos · Accepted Answer

我遇到了同样的问题，想分享两种解决方法：

如果消费的包只包含一个单一模块，就像之前的1.0.1版本的jsonc-parser一样，你可以将以下内容添加到你的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：

module: {
    rules: [
        // other rules come here.
        {
            test: /node_modules[\\|/](jsonc-parser|other-umd-packages)/,
            use: { loader: 'umd-compat-loader' }
        }
    ]
},

关于如何正确使用test的一些提示，可以在这里找到。最后但同样重要的是，感谢解决方法的原作者。