0

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

import React from 'react';

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

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

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

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

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

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

我们应该如何使用 来处理这个配置webpack？为什么不能像编译时那样webpack捆绑 react 依赖项？systemcommonjs

PS：我特别要求使用webpack, not systemjs-builderorjspm

4

1 回答 1

0

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

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

于 2015-09-30T21:19:25.777 回答