使用 Webpack 和 Babel 将 ES6 转换为 AMD答案

【问题标题】：Using Webpack and Babel to convert ES6 to AMD使用 Webpack 和 Babel 将 ES6 转换为 AMD
【发布时间】：2015-09-30 22:26:03
【问题描述】：

我在我的应用程序中使用 webpack，并让 babel 将我的 js/jsx 文件从 es6 转换为 es5。

我想让 babel 将这些文件中加载的模块转换为 AMD。我看到了如何用 grunt-babel 做到这一点： Using Babel to convert ES6 modules to ES5 AMD modules, not working as expected

如果我想让 webpack 处理 babel 转换，我该怎么做？

例如，在 webpack.config.js 我有：

module: {
  loaders: [{
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loader: 'babel'
  }
}

我可以在那里设置一个选项让 Babel 使用 AMD 吗？

【问题讨论】：

这有什么意义？由于 webpack 仍在捆绑所有内容，因此它们的行为相同。
@loganfsmyth -- 你的意思是说在其默认配置中，Babel 会将 es6 'import' 转换为 es5 异步模块加载器吗？从我所见，我认为它正在转换为 commonjs，这就是为什么我想将它显式设置为 AMD。但如果我弄错了，请告诉我。谢谢！
我的观点是，即使你告诉 Babel 创建 AMD 模块，你也没关系，因为最终结果是一个 Webpack 包，它既不是 CommonJS 也不是 AMD，并且各个文件是AMD 没有区别。
啊，我想我明白了。我最担心的是模块是否会异步加载......听起来无论我是否将模块加载器设置为“amd”都会发生这种情况，对吗？
webpack 包是加载的东西，所以当它准备好运行时，无论是 AMD 还是 CommonJS，Babel 的输出格式都将表现相同。在 Webpack 的上下文中“异步加载”是什么意思？

【解决方案1】：

您可以使用query 键为 babel 设置选项：

module: {
  loaders: [{
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loader: 'babel',
    query: {
        modules: 'amd'
    }
  }
}

【讨论】：

【解决方案2】：

如果您想将整个捆绑包生成为 AMD 模块，您可以在“output.libraryTarget”配置中进行设置：

{
  output: {
    libraryTarget: "amd"
  }
}

请参见此处，在“output.libraryTarget”中： https://webpack.github.io/docs/configuration.html

【讨论】：

这似乎对我有用。（并且接受的答案没有。）我的用例：已经为其他目的设置了 webpack/es6，并希望输出一个可以在基于 requirejs 的另一个应用程序中使用的模块。