javascript - How to properly override babel@7 plugins for separate webpack serverclient configurations - Stack Overflow

admin管理员组

文章数量:1425200

I'm using a single .babelrc config and using it in webpack.config.client.js and webpack.config.server.js with 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": {}
  }
}

The problem is, react-hot-loader find it's way into piled server code. I did some research and I see that babel 7 allows to configure overrides for such case.

I tried to implement it, but the "env" part never gets overridden:

{
  "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": [] 
      }
    }
  }
}

Appreciate any help

I'm using a single .babelrc config and using it in webpack.config.client.js and webpack.config.server.js with 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": {}
  }
}

The problem is, react-hot-loader find it's way into piled server code. I did some research and I see that babel 7 allows to configure overrides for such case.

I tried to implement it, but the "env" part never gets overridden:

{
  "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": [] 
      }
    }
  }
}

Appreciate any help

• javascript
• webpack
• babeljs
• babel-loader

Share Improve this question Follow edited Sep 1, 2018 at 18:09 yotke asked Sep 1, 2018 at 15:28 yotkeyotke 1,20822 gold badges1313 silver badges2626 bronze badges 2

• Are you setting the environment somewhere? If so, how. – loganfsmyth Commented Sep 1, 2018 at 17:27
• I set env with dotenv in webpack and server. The env is working. In development, react-hot-loader plugin is in client bundle and server bundle. I'm looking how to remove it from server bundle. – yotke Commented Sep 1, 2018 at 17:31

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Babel doesn't know anything about your client/server differentiation. Your "include": "./src/server/index.js", check would affect that single file, but not your conceptual server bundle.

Realistically, there are a bunch of ways to do this, but I'll just list a couple to start.

One would be to use env and have 4 instead of 2 (production-client, production-server, development-client, development-server). Then you could do

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

Alternatively, you could set another environment variable, e.g.

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

and rename your config to be a .babelrc.js file, and do

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

本文标签：