使用 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 吗？

Answer 1

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

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

有关所有可用选项，请查看此处： http : //babeljs.io/docs/usage/options/

Answer 2

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

{
  output: {
    libraryTarget: "amd"
  }
} 

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