javascript - 如何为单独的 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-客户端，开发服务器)。那么你可以做

"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": {}
  },
};