使用Webpack和Babel将ES6转换为AMD

Question

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

我希望babel可以将这些文件中的模块加载转换为AMD。我知道如何使用grunt-babel实现这一点： 使用Babel将ES6模块转换为ES5 AMD模块，但结果并不如预期 如果我想让webpack处理babel转换，我该怎么做呢？

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

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

我能否在那里设置一个选项让Babel使用AMD？

- Ghan

---

这样做有什么意义呢？因为webpack仍然将它们捆绑在一起，所以它们的行为是相同的。 - loganfsmyth

@loganfsmyth -- 你的意思是说，在默认配置下，Babel会将es6的'import'转换为es5异步模块加载器吗？从我所看到的情况来看，我认为它正在转换为commonjs，这就是为什么我想明确地将其设置为AMD的原因。但如果我错了，请告诉我。谢谢！ - Ghan

我的观点是，即使你告诉Babel创建AMD模块，也没有关系，因为最终结果是一个Webpack捆绑包，既不是CommonJS也不是AMD，而且将单独的文件设置为AMD也没有任何区别。 - loganfsmyth

啊，我想我明白了。我最大的担心是模块是否会异步加载......听起来无论我将模块加载器设置为“amd”与否，这都会发生，对吗？ - Ghan

webpack捆绑包是加载的东西，因此当它准备好运行时，无论是AMD还是CommonJS，来自Babel的输出格式都会表现出相同的行为。在Webpack的上下文中，“异步加载”是什么意思？ - loganfsmyth

Answer 1

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

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

如果您想了解所有可用选项，请查看此处: http://babeljs.io/docs/usage/options/

- Rise Ledger

Answer 2

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

{
  output: {
    libraryTarget: "amd"
  }
} 

在"output.libraryTarget"中，参见： https://webpack.github.io/docs/configuration.html

- lyosef

---

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