项目打包时去除console语句的解决方法——babel-plugin-transform-remove-console 插件

最新推荐文章于 2025-05-12 17:16:12 发布

青青子衿越

最新推荐文章于 2025-05-12 17:16:12 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/qq_46376192/article/details/128881930

在项目构建阶段使用babel-plugin-transform-remove-console插件来移除console语句。该插件配置在babel.config.js中，并通过检查process.env.NODE_ENV判断是否处于生产环境，仅在生产环境下移除console。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

即在项目 build 阶段把所有的 console 移除掉

1，安装插件

npm install babel-plugin-transform-remove-console --save-dev

2，声明插件，项目中 babel.config.js 文件

"plugins": [
	"transform-remove-console"
]

3，重新运行 build

npm run build

但是，babel.config.js 文件是全局共享的，不管是项目开发阶段（serve）还是项目发布阶段（build），这个配置文件都会生效。

只在项目发布阶段移除所有的 console

项目中 babel.config.js 文件

//	先定义一个空数组，然后判断当前项目是处于开发阶段还是处于发布阶段
// 这是项目在发布阶段需要用到的babel插件
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
  prodPlugins.push("transform-remove-console")

}


module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      },
    ],
    ...prodPlugins

  ]
}

最后重新运行build