reactjs - 使用 WebPack/Babel 在生产 React JS 中删除 console.log

Question

我想在开发人员版本中保留 console.log，但在生产版本中我希望将它们删除。

babel-plugin-transform-remove-console

我不记得我是否将其安装为 --save 或 --save-dev (并且不太确定区别)。我也不知道如何检查它是如何安装的，但它在我的 node_modules 目录中为 babel-plugin-transform-remove-console .

我是否使用npm run dev或npm run build为了构建我的项目，我仍然看到 console.log 语句。我本以为 npm run build命令删除 console.log 文件。

我的 .babelrc 文件如下所示:

{
  "presets" : ["env", "stage-0", "react"],
  "env" : {
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

我的 package.json 的相关部分如下所示:

  "scripts": {
    "dev": "webpack -d --watch",
    "build": "webpack -p"
  },
  ...
  "dependencies": {
    ...
    "babel-plugin-transform-remove-console": "^6.9.2",
    ...
  }

为什么是npm run build不为我删除 console.log 语句吗？

Answer 1

-p 是 Webpack 本身的标志。巴贝尔对此一无所知。如果您希望 Webpack 配置根据它切换行为，您需要自己执行此操作。

// webpack.config.js
module.exports = function(env) {
  return {
    // ...
    module: {
      rules: [{
        loader: "babel-loader",
        options: {
          forceEnv: env.production ? "production" : "development"
        }
      }],
    },
  },
};