Question

我正在尝试构建一个依赖于使用UMD导出构建的库的简单文件。

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

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

console.log(tree);

它编译得很好，但是webpack会出现依赖性错误：

哈希：85004e3e1bd3582666f5   版本：webpack 2.3.2   时间：959毫秒             资产大小块大块名称    dist / bundle.js 61.8 kB 0 [emit] main   build / main.d.ts 0字节[发出]      [0] ./~/jsonc-parser/lib/main.js 40.1 kB {0} [built]      [1] ./~/jsonc-parser/lib 160字节{0} [已建]      [2] ./~/path-browserify/index.js 6.18 kB {0} [built]      [3] ./~/process/browser.js 5.3 kB {0} [built]      [4] ./src/main.ts 200字节{0} [已建]      [5] ./~/vscode-nls/lib 160字节{0} [可选] [已建]      [6] ./~/vscode-nls/lib/main.js 5.46 kB {0} [built]
     警告在./~/jsonc-parser/lib/main.js中   3：24-31关键依赖关系：require函数的使用方式是无法静态提取依赖关系
     警告在./~/vscode-nls/lib/main.js中   118：23-44关键依赖：依赖的请求是表达式
     错误在./~/vscode-nls/lib/main.js中   找不到模块：错误：无法解决问题＆＃39; fs＆＃39;在＆＃39; ... / webpack-typescript-umd / node_modules / vscode-nls / lib＆＃39;    @ ./~/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。

我创建了a repo on github来显示错误的案例。希望这可以帮到你。

您只需npm install && npm run dist即可重现错误。

Answer 1

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

如果所使用的软件包由一个模块组成，就像1.0.1 version的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并在rule中配置以下webpack.config.js：

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

有关如何正确使用test的一些提示，可以找到here。最后，但并非最不重要的是，信用额转到OP of the workaround。

使用webpack导入UMD内置模块会导致严重依赖性错误

1 个答案: