Vue移除Console.log()

甄子行發表於2020-12-20

移除Console.log()
一. 安裝對應依賴
兩種方法:分別針對於終端和視覺化視窗,
第一種方式為:開啟終端-輸入npm i babel-plugin-transform-remove-console --save --dev
第二種方法為:開啟視覺化視窗-依賴皮膚-安裝依賴-選擇開發依賴-搜尋babel-plugin-transform-remove-console外掛
二. 原理分析
在babel檔案新增transform-remove-console欄位,取除console.log輸出,通過新增if函式
以實現釋出專案階段的作用生效
三. 操作原理
(1) 首先進入專案開啟babel.config.js,將 transform-remove-console貼上到plugins陣列當中
在這裡插入圖片描述

(2) 但這種移除方法會將專案開發階段和釋出階段的列印輸出方式全部移除,顯然這是不合理的,所以應當將其修改為釋出階段的移除模式,首先需要在babel.config.js當中定義一個空陣列prodPlugins用於接收transform-remove-console欄位,接下來,判斷process.env.NODE_ENV的值,如果值為production證明專案屬於釋出階段,那麼將transform-remove-console欄位加入到prodPlugins當中,並將prodPlugins陣列以…prodPlugins的形式儲存到plugins陣列當中,同時刪除之前加入的transform-remove-console
在這裡插入圖片描述

相關文章