zoukankan      html  css  js  c++  java
  • 插件--babel-plugin-transfrom-remove-console

    场景描述

    在vue-cli创建的项目中,开发阶段会经常使用console来打印内容,方便我们调试,但是生产阶段我们不希望在控制台输出信息,可以使用babel-plugin-transfrom-remove-console插件

    环境

    "dependencies": {
    	"vue": "^2.6.11",
    },
    "devDependencies": {
    	"babel-plugin-transform-remove-console": "^6.9.4",
    }
    

    步骤

    安装

    npm i -D babel-plugin-transfrom-remove-console
    

    配置

    注意:此不是最终配置

    babel.config.js中配置下面的内容:

    module.exports = {
      'plugins': [
        'transform-remove-console'
      ]
    }
    

    上面的配置会导致开发和生产中关于"console"都会被移除,那针对开发阶段就不友好了,如何让上面的配置只在生产时有效??

    最终配置

    思路:通过获取vue ui执行编译 、打包执行命令时传递的mode值来执行不同的脚本

    babel.config.js

    // 项目开发阶段用到的babel插件
    const prodPlugins = []
    if (process.env.NODE_ENV === 'production') {
      prodPlugins.push('transform-remove-console')
    }
    module.exports = {
      'plugins': [
        // 发布产品时候的插件数组
        ...prodPlugins
      ]
    }
    

    验证

    编译时console的内容有输出,打包时无console的内容输出。

    开发阶段console的内容可以输出,生产阶段console的内容不会输出

  • 相关阅读:
    最短路必经点(边)
    [HNOI2008]越狱
    【模版】卢卡斯定理
    偶数
    [USACO17FEB]Why Did the Cow Cross the Road I S
    [USACO17FEB]Why Did the Cow Cross the Road II S
    [USACO07NOV]电话线Telephone Wire
    [JSOI2007]祖码Zuma
    单人纸牌_NOI导刊2011提高(04)
    [USACO13OPEN]重力异常
  • 原文地址:https://www.cnblogs.com/it774274680/p/15328736.html
Copyright © 2011-2022 走看看