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

Question

我需要 Babel 不仅用于网络应用程序(由 Webpack 构建)，还用于 nodejs 自动化实用程序，如 gulp。在一般情况下，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教程)。

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

因为 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
    }
}

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