Node.js 和前端 Web 应用程序的单独 babel 配置是同一个项目

Question

我不仅需要Babel用于 Web 应用程序（由 Webpack 构建），还需要用于 Nodejs 自动化实用程序，例如gulp. 一般情况下，web应用和nodejs的babel设置不能相同。问题是如何将其分开。

我还没有测试过，但我想我们可以.babelrc直接在 webpack 配置中定义 Nodejs 的设置和 Web 应用程序的设置，例如：

module.exports = {

  // ...

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader?blacklist[]=regenerator',
            options: {
              presets: [
                ['env', {'modules': false}]
              ],
              plugins: [
                'syntax-dynamic-import',
                'transform-runtime'
              ]
            }
          },
          'eslint-loader'
        ]
      }
    ]
  }
};

问题是哪个配置 webpack 将给予更高的优先级：.babelrc或 webpack 加载器选项（需要第二个）。

Answer 1

babel 7 的答案（最新）

首先确保你已经@babel/core安装@babel/preset-env了（按照安装 babel 7 教程）。

代替 。在项目根目录中babelrc使用.babel.config.js 。

因为babel.config.js(与package.json) 只是 javascript 文件，所以您现在可以使用条件。

例如，您现在可以设置环境变量，该变量将作为全局变量的属性BABEL_ENV提供（webpack 也在环境中运行）。nodeprocessprocess.env.BABEL_ENVnode

例如 callBABEL_ENV=browser npx webpack和 call BABEL_ENV=node some_other_command。现在您可以访问process.env.BABEL_ENV和使用如下逻辑：

babel.config.js

module.exports = function () {
    const isBrowser = process.env.BABEL_ENV === 'browser';

    const presets = ['shared_preset_1', 'shared_preset_2'];

    const plugins = ['shared_plugin_1', 'shared_plugin_2'];


    if (isBrowser) {
        plugins.push('YOUR PLUGIN');
    }

    if (!isBrowser) {
        // other logic
    }
}

至于 babel 6：我会说尝试一下。如果你用谷歌搜索这个问题，你会发现很多困惑babel-loader，因为决定使用哪个 babel 配置的 ，从未记录过它。显然有一个未记录的功能：{ babelrc: false }优先考虑 webpack 设置配置，但如果你查找它：它非常模糊！