• 插件--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的内容不会输出

  • 相关阅读:
    存储过程
    事务
    mysql常用函数
    explain相关
    索引相关
    sql基本查询语法
    kubernetes日常记录
    Kubernetes的RBAC权限控制
    kubernetes安装ingress-nginx
    Kubernetes部署nginx-ingress
  • 原文地址:https://www.cnblogs.com/it774274680/p/15328736.html
Copyright © 2020-2023  润新知