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
        }
      }
    ]
  }
}

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

我们如何使用webpack来处理此配置？为什么不能webpack使用system捆绑反应依赖项，因为它在编译成commonjs时已经这样做了？

PS：我特别要求使用webpack，而非systemjs-builder或jspm

来实现这一目标

Answer 1

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

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

使用Webpack和System的未解析的节点模块依赖性

1 个答案: