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') 
       } 
      }, 
     ] 
    } 
} 

私はcommonjsとして私js transpiledファイルを維持したいが、私のようにそれを再コンパイルせずに、同様jsonc-parserをバンドルしたいですcommonjs。

私はa repo on githubを作成しました。エラーを表示します。うまくいけば、これはあなたを助けることができます。

単純にnpm install && npm run distでエラーを再現できます。

Answer 1

私は同じ問題に遭遇し、問題を回避する2つの方法を共有したいと思った：

消費パッケージはちょうどjsonc-parserの1.0.1 version前のように、1つのモジュールで構成されている場合、あなたは以下を追加することができますあなたのwebpack.config.js：

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

消費パッケージは複数のファイルで構成されている場合、1は、回避策としてumd-compat-loaderを使用することができます。 webpack.config.jsで次ruleをごpackage.jsonにumd-compat-loaderローダーを追加し、設定します。

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に行きます。