使用webpack導入UMD內置模塊導致嚴重依賴錯誤

Question

我正在嘗試構建一個簡單文件，該文件依賴於使用UMD導出構建的庫。

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

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

console.log(tree); 

它編譯罰款，但的WebPack吐出相關性錯誤：

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]

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

WARNING in ./~/vscode-nls/lib/main.js 118:23-44 Critical dependency: the request of a dependency is an expression

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 transpiled文件作爲commonjs但我希望捆綁jsonc-parser以及無需重新編譯它作爲commonjs。

我創建了a repo on github顯示錯誤的案例。希望這可以幫助你。

您可以簡單地npm install && npm run dist重現錯誤。

Answer 1

我遇到同樣的問題，並希望分享兩種方法來解決該問題：

在消耗包由一個單一的模塊，就像以前jsonc-parser的1.0.1 version，你可以添加以下內容您webpack.config.js：

module: { 
    rules: [ 
     // your rules come here. 
    ], 
    noParse: /jsonc-parser|other-umd-packages/ 
}, 

在消耗包包含多個文件，可以使用umd-compat-loader作爲一種解決方法。在webpack.config.js的umd-compat-loader裝載機添加到您的package.json並配置以下rule：

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。