如何为单独的 webpack 服务器/客户端配置正确覆盖 babel@7 插件

Question

我正在使用单个 .babelrc 配置并在 webpack.config.client.js 和 webpack.config.server.js 中与 babel-loader 一起使用。

.babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "debug": false,
        "modules": false,
        "loose": true
      }
    ],
    "@babel/react"
  ],
  "env": {
    "development": {
      "plugins": ["react-hot-loader/babel"]
    },
    "production": {}
  }
}

问题是，react-hot-loader 找到了编译服务器代码的方法。 我做了一些研究，发现 babel 7 允许 configure overrides 处理这种情况。

我尝试实现它，但“env”部分永远不会被覆盖：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "debug": false,
        "modules": false,
        "loose": true
      }
    ],
    "@babel/react"
  ],
  "env": {
    "development": {
      "plugins": ["react-hot-loader/babel"]
    },
    "production": {}
  },
  "overrides": {
    "include": "./src/server/index.js", // ?
    "env": {
      "development": {
        "plugins": [] 
      }
    }
  }
}

感谢任何帮助

Answer 1

Babel 对您的客户端/服务器差异一无所知。您的 "include": "./src/server/index.js", 检查会影响该单个文件，但不会影响您的概念服务器包。

实际上，有很多方法可以做到这一点，但我只列出几个开始。

一种方法是使用 env 并使用 4 而不是 2（production-client、production-server、development-client、development-server）。那你就可以了

"env": {
  "development-client": {
    "plugins": ["react-hot-loader/babel"]
  },
}

或者，您可以设置另一个环境变量，例如

cross-env NODE_ENV=development BUNDLE_NAME=server webpack --config webpack.config.server.js

并将您的配置重命名为.babelrc.js 文件，然后执行

module.exports = {
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "debug": false,
        "modules": false,
        "loose": true
      }
    ],
    "@babel/react"
  ],
  "env": {
    "development": {
      "plugins": 
        process.env.BUNDLE_NAME === "server" 
          ? [] 
          : ["react-hot-loader/babel"]
    },
    "production": {}
  },
};