Question

我不仅需要 Babel ，不仅需要Web应用程序（由Webpack构建），还需要诸如gulp之类的nodejs自动化实用程序。通常，Web应用程序和nodejs的babel设置不能相同。问题是如何将其分开。

我尚未测试，但是我想我们可以在.babelrc中定义nodejs的设置，并直接在webpack配置中定义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教程安装）。

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

由于babel.config.js（与package.json相反）只是一个javascript文件，因此您现在可以使用条件语句了。

例如，您现在可以设置环境变量BABEL_ENV，该变量将在node中作为process下全局process.env.BABEL_ENV变量的属性（也运行Webpack）在node环境中）。

例如，呼叫BABEL_ENV=browser npx webpack，也呼叫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
    }
}

至于通天塔6：我想说就试一试。如果您用谷歌搜索该问题，您会发现很多困惑，因为决定使用哪个babel配置的babel-loader从未对其进行记录。显然，有一个未公开记录的功能：{ babelrc: false }优先考虑Webpack集的配置，但是如果您查找它，这将非常模糊！

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

1 个答案: