未解决的节点模块依赖使用 Webpack 和系统

Question

我在我的代码中导入了以下 ES6 以从 node_modules 文件夹导入项目依赖项：

import React from 'react';

通过使用这个 webpack 配置，一切都按预期工作：

{
  module: {
    loaders: [
      {
        loader: 'babel',
        test: /(\.js|\.jsx)/,
        exclude: /(node_modules|bower_components)/
      }
    ]
  }
}

我最终得到一个包含自动添加的反应依赖项的捆绑文件。

但是如果我将 babel 配置为使用 modules: 'system' 将导入输出为 System.register:

{
  module: {
    loaders: [
      {
        loader: 'babel',
        test: /(\.js|\.jsx)/,
        exclude: /(node_modules|bower_components)/,
        query: {
          modules: 'system',
          moduleIds: true,
          keepModuleIdExtensions: true
        }
      }
    ]
  }
}

然后捆绑文件不再包含反应依赖项，我必须在通过 webpack 后将 systemjs 库附加到编译文件中。

我们应该如何使用 webpack 处理此配置？为什么 webpack 不能像编译成 commonjs 时那样使用 system 捆绑 React 依赖项？

PS：我特别要求使用 webpack 实现此目的，而不是 systemjs-builder 或 jspm

Answer 1

Webpack 不是这样工作的。 Webpack 可以处理 AMD 和 CommonJS 模块，它不能处理 SystemJS 模块。

为了让 Webpack 支持模块系统，它需要能够查看 JS 并静态决定哪些文件依赖于哪些文件，然后修改该文件，使其能够工作并与其他模块兼容。它现在不知道 SystemJS 是什么，所以它看到的只是一个没有引用任何 CommonJS 模块的 JS 文件，因为它从不使用 require().

未解决的节点模块依赖使用 Webpack 和系统

Unresolved node modules dependency using Webpack and System

ecmascript-6

systemjs

webpack

babeljs