使用 Webpack 和 Babel 将 ES6 转换为 AMD

Question

我在我的应用程序中使用 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 吗？

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

Using Webpack and Babel to convert ES6 to AMD