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

Question

我使用的是单一的.babelrc配置和使用它webpack.config.client.js，并webpack.config.server.js用巴贝尔装载机。

.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 允许为这种情况配置覆盖。

我试图实现它，但“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",检查将影响该单个文件，但不会影响您的概念服务器包。

实际上，有很多方法可以做到这一点，但我只列出其中几种。

一种方法是使用envand have 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": {}
  },
};