如何为单独的 webpack server/client 配置正确覆盖 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 对您的 client/server 微分一无所知。您的 "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": {}
  },
};

如何为单独的 webpack server/client 配置正确覆盖 babel@7 插件

How to properly override babel@7 plugins for separate webpack server/client configurations

javascript

webpack

babeljs

babel-loader