代码之家 › 专栏 › 技术社区 › yotke

如何正确覆盖巴别塔@7用于单独网页包服务器/客户端配置的插件

babel-loader babeljs webpack javascript

yotke · 技术社区 · 6 年前

.babelrc 配置并在中使用它 webpack.config.client.js webpack.config.server.js

.LRC公司:

{
  "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会发现它进入了已编译的服务器代码中。我做了一些研究,我发现巴别塔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": [] 
      }
    }
  }
}

谢谢你的帮助

1 回复 | 直到 6 年前

loganfsmyth 6 年前

"include": "./src/server/index.js", 检查将影响单个文件,但不会影响概念服务器包。

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

一种是使用 env 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": {}
  },
};

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前