babel插件去除console示例詳解
起因
已經(jīng)頹廢了很久 因?yàn)閷?shí)在不知道寫啥了 突然我某個(gè)同事對(duì)我說(shuō) 寶哥 你看這個(gè)頁(yè)面好多console.log 不僅會(huì)影響性能 而且可能會(huì)被不法分子所利用 我覺(jué)得很有道理 所以我萌生了寫一個(gè)小插件來(lái)去除生產(chǎn)環(huán)境的console.log的想法
介紹
我們籠統(tǒng)的介紹下babel,之前我有一篇寫精度插件的babel文章,babel一共有三個(gè)階段:第一階段是將源代碼轉(zhuǎn)化為ast語(yǔ)法樹(shù)、第二階段是對(duì)ast語(yǔ)法樹(shù)進(jìn)行修改,生成我們想要的語(yǔ)法樹(shù)、第三階段是將ast語(yǔ)法樹(shù)解析,生成對(duì)應(yīng)的目標(biāo)代碼。

窺探
我們的目的是去除console.log,我們首先需要通過(guò)ast查看語(yǔ)法樹(shù)的結(jié)構(gòu)。我們以下面的console為例:
注意 因?yàn)槲覀円獙慴abel插件 所以我們選擇@babel/parser庫(kù)生成ast,因?yàn)閎abel內(nèi)部是使用這個(gè)庫(kù)生成ast的

console.log("我會(huì)被清除");

初見(jiàn)AST
AST是對(duì)源碼的抽象,字面量、標(biāo)識(shí)符、表達(dá)式、語(yǔ)句、模塊語(yǔ)法、class語(yǔ)法都有各自的AST。
我們這里只說(shuō)下本文章中所使用的AST。
Program
program 是代表整個(gè)程序的節(jié)點(diǎn),它有 body 屬性代表程序體,存放 statement 數(shù)組,就是具體執(zhí)行的語(yǔ)句的集合。
可以看到我們這里的body只有一個(gè)ExpressionStatement語(yǔ)句,即console.log。
ExpressionStatement
statement 是語(yǔ)句,它是可以獨(dú)立執(zhí)行的單位,expression是表達(dá)式,它倆唯一的區(qū)別是表達(dá)式執(zhí)行完以后有返回值。所以ExpressionStatement表示這個(gè)表達(dá)式是被當(dāng)作語(yǔ)句執(zhí)行的。
ExpressionStatement類型的AST有一個(gè)expression屬性,代表當(dāng)前的表達(dá)式。
CallExpression
expression 是表達(dá)式,CallExpression表示調(diào)用表達(dá)式,console.log就是一個(gè)調(diào)用表達(dá)式。
CallExpression類型的AST有一個(gè)callee屬性,指向被調(diào)用的函數(shù)。這里console.log就是callee的值。
CallExpression類型的AST有一個(gè)arguments屬性,指向參數(shù)。這里“我會(huì)被清除”就是arguments的值。
MemberExpression
Member Expression通常是用于訪問(wèn)對(duì)象成員的。他有幾種形式:
a.b a["b"] new.target super.b
我們這里的console.log就是訪問(wèn)對(duì)象成員log。
- 為什么MemberExpression外層有一個(gè)CallExpression呢?
實(shí)際上,我們可以理解為,MemberExpression中的某一子結(jié)構(gòu)具有函數(shù)調(diào)用,那么整個(gè)表達(dá)式就成為了一個(gè)Call Expression。
MemberExpression有一個(gè)屬性object表示被訪問(wèn)的對(duì)象。這里console就是object的值。
MemberExpression有一個(gè)屬性property表示對(duì)象的屬性。這里log就是property的值。
MemberExpression有一個(gè)屬性computed表示訪問(wèn)對(duì)象是何種方式。computed為true表示[],false表示. 。
Identifier
Identifer 是標(biāo)識(shí)符的意思,變量名、屬性名、參數(shù)名等各種聲明和引用的名字,都是Identifer。
我們這里的console就是一個(gè)identifier。
Identifier有一個(gè)屬性name 表示標(biāo)識(shí)符的名字
StringLiteral
表示字符串字面量。
我們這里的log就是一個(gè)字符串字面量
StringLiteral有一個(gè)屬性value 表示字符串的值
公共屬性
每種 AST 都有自己的屬性,但是它們也有一些公共的屬性:
- type:AST節(jié)點(diǎn)的類型
- start、end、loc:start和end代表該節(jié)點(diǎn)在源碼中的開(kāi)始和結(jié)束下標(biāo)。而loc屬性是一個(gè)對(duì)象,有l(wèi)ine和column屬性分別記錄開(kāi)始和結(jié)束的行列號(hào)
- leadingComments、innerComments、trailingComments:表示開(kāi)始的注釋、中間的注釋、結(jié)尾的注釋,每個(gè) AST 節(jié)點(diǎn)中都可能存在注釋,而且可能在開(kāi)始、中間、結(jié)束這三種位置,想拿到某個(gè) AST 的注釋就通過(guò)這三個(gè)屬性。
如何寫一個(gè)babel插件?
babel插件是作用在第二階段即transform階段。
transform階段有@babel/traverse,可以遍歷AST,并調(diào)用visitor函數(shù)修改AST。
我們可以新建一個(gè)js文件,其中導(dǎo)出一個(gè)方法,返回一個(gè)對(duì)象,對(duì)象存在一個(gè)visitor屬性,里面可以編寫我們具體需要修改AST的邏輯。
+ export default () => {
+ return {
+ name: "@parrotjs/babel-plugin-console",
+ visitor,
+ };
+ };
構(gòu)造visitor方法
path 是記錄遍歷路徑的 api,它記錄了父子節(jié)點(diǎn)的引用,還有很多增刪改查 AST 的 api

+ const visitor = {
+ CallExpression(path, { opts }) {
+ //當(dāng)traverse遍歷到類型為CallExpression的AST時(shí),會(huì)進(jìn)入函數(shù)內(nèi)部,我們需要在函數(shù)內(nèi)部修改
+ }
+ };
我們需要遍歷所有調(diào)用函數(shù)表達(dá)式 所以使用CallExpression。
去除所有console
我們將所有的console.log去掉
path.get 表示獲取某個(gè)屬性的path
path.matchesPattern 檢查某個(gè)節(jié)點(diǎn)是否符合某種模式
path.remove 刪除當(dāng)前節(jié)點(diǎn)
CallExpression(path, { opts }) {
+ //獲取callee的path
+ const calleePath = path.get("callee");
+ //檢查callee中是否符合“console”這種模式
+ if (calleePath && calleePath.matchesPattern("console", true)) {
+ //如果符合 直接刪除節(jié)點(diǎn)
+ path.remove();
+ }
},
增加env api
一般去除console.log都是在生產(chǎn)環(huán)境執(zhí)行 所以增加env參數(shù)
AST的第二個(gè)參數(shù)opt中有插件傳入的配置
+ const isProduction = process.env.NODE_ENV === "production";
CallExpression(path, { opts }) {
....
+ const { env } = opts;
+ if (env === "production" || isProduction) {
path.remove();
+ }
....
},
增加exclude api
我們上面去除了所有的console,不管是error、warning、table都會(huì)清除,所以我們加一個(gè)exclude api,傳一個(gè)數(shù)組,可以去除想要去除的console類型
....
+ const isArray = (arg) => Object.prototype.toString.call(arg) === "[object Array]";
- const { env } = opts;
+ const { env,exclude } = opts;
if (env === "production" || isProduction) {
- path.remove();
+ //封裝函數(shù)進(jìn)行操作
+ removeConsoleExpression(path, calleePath, exclude);
}
+const removeConsoleExpression=(path, calleePath, exclude)=>{
+ if (isArray(exclude)) {
+ const hasTarget = exclude.some((type) => {
+ return calleePath.matchesPattern("console." + type);
+ });
+ //匹配上直接返回不進(jìn)行操作
+ if (hasTarget) return;
+ }
+ path.remove();
+}
增加commentWords api
某些時(shí)候 我們希望一些console 不被刪除 我們可以給他添加一些注釋 比如
//no remove
console.log("測(cè)試1");
console.log("測(cè)試2");//reserse
//hhhhh
console.log("測(cè)試3")

如上 我們希望帶有no remove前綴注釋的console 和帶有reserse后綴注釋的console保留不被刪除
之前我們提到 babel給我們提供了leadingComments(前綴注釋)和trailingComments(后綴注釋)我們可以利用他們 由AST可知 她和CallExpression同級(jí),所以我們需要獲取他的父節(jié)點(diǎn) 然后獲取父節(jié)點(diǎn)的屬性
path.parentPath 獲取父path
path.node 獲取當(dāng)前節(jié)點(diǎn)
- const { exclude, env } = opts;
+ const { exclude, commentWords, env } = opts;
+ const isFunction = (arg) =>Object.prototype.toString.call(arg) === "[object Function]";
+ // 判斷是否有前綴注釋
+ const hasLeadingComments = (node) => {
+ const leadingComments = node.leadingComments;
+ return leadingComments && leadingComments.length;
+ };
+ // 判斷是否有后綴注釋
+ const hasTrailingComments = (node) => {
+ const trailingComments = node.trailingComments;
+ return trailingComments && trailingComments.length;
+ };
+ //判斷是否有關(guān)鍵字匹配 默認(rèn)no remove || reserve 且如果commentWords和默認(rèn)值是相斥的
+ const isReserveComment = (node, commentWords) => {
+ if (isFunction(commentWords)) {
+ return commentWords(node.value);
+ }
+ return (
+ ["CommentBlock", "CommentLine"].includes(node.type) &&
+ (isArray(commentWords)
+ ? commentWords.includes(node.value)
+ : /(no[t]? remove\b)|(reserve\b)/.test(node.value))
+ );
+};
- const removeConsoleExpression = (path, calleePath, exclude) => {
+ const removeConsoleExpression = (path, calleePath, exclude,commentWords) => {
+ //獲取父path
+ const parentPath = path.parentPath;
+ const parentNode = parentPath.node;
+ //標(biāo)識(shí)是否有前綴注釋
+ let leadingReserve = false;
+ //標(biāo)識(shí)是否有后綴注釋
+ let trailReserve = false;
+ if (hasLeadingComments(parentNode)) {
+ //traverse
+ parentNode.leadingComments.forEach((comment) => {
+ if (isReserveComment(comment, commentWords)) {
+ leadingReserve = true;
+ }
+ });
+ }
+ if (hasTrailingComments(parentNode)) {
//traverse
+ parentNode.trailingComments.forEach((comment) => {
+ if (isReserveComment(comment, commentWords)) {
+ trailReserve = true;
+ }
+ });
+ }
+ //如果沒(méi)有前綴節(jié)點(diǎn)和后綴節(jié)點(diǎn) 直接刪除節(jié)點(diǎn)
+ if (!leadingReserve && !trailReserve) {
+ path.remove();
+ }
}
細(xì)節(jié)完善
我們大致完成了插件 我們引進(jìn)項(xiàng)目里面進(jìn)行測(cè)試
console.log("測(cè)試1");
//no remove
console.log("測(cè)試2");
console.log("測(cè)試3");//reserve
console.log("測(cè)試4");
//新建.babelrc 引入插件
{
"plugins":[["../dist/index.cjs",{
"env":"production"
}]]
}
理論上應(yīng)該移除測(cè)試1、測(cè)試4,但是我們驚訝的發(fā)現(xiàn) 竟然一個(gè)console沒(méi)有刪除??!經(jīng)過(guò)排查 我們大致確定了問(wèn)題所在
因?yàn)闇y(cè)試2的前綴注釋同時(shí)也被AST納入了測(cè)試1的后綴注釋中了,而測(cè)試3的后綴注釋同時(shí)也被AST納入了測(cè)試4的前綴注釋中了
所以測(cè)試1存在后綴注釋 測(cè)試4存在前綴注釋 所以測(cè)試1和測(cè)試4沒(méi)有被刪除
那么我們?cè)趺磁袛嗄兀?/p>
對(duì)于后綴注釋
我們可以判斷后綴注釋是否與當(dāng)前的調(diào)用表達(dá)式處于同一行,如果不是同一行,則不將其歸納為后綴注釋
if (hasTrailingComments(parentNode)) {
+ const { start:{ line: currentLine } }=parentNode.loc;
//traverse
// @ts-ignore
parentNode.trailingComments.forEach((comment) => {
+ const { start:{ line: currentCommentLine } }=comment.loc;
+ if(currentLine===currentCommentLine){
+ comment.belongCurrentLine=true;
+ }
+ //屬于當(dāng)前行才將其設(shè)置為后綴注釋
- if (isReserveComment(comment, commentWords))
+ if (isReserveComment(comment, commentWords) && comment.belongCurrentLine) {
trailReserve = true;
}
});
}
我們修改完進(jìn)行測(cè)試 發(fā)現(xiàn)測(cè)試1 已經(jīng)被刪除
對(duì)于前綴注釋
那么對(duì)于前綴注釋 我們應(yīng)該怎么做呢 因?yàn)槲覀冊(cè)诤缶Y注釋的節(jié)點(diǎn)中添加了一個(gè)變量belongCurrentLine,表示該注釋是否是和節(jié)點(diǎn)屬于同一行。
那么對(duì)于前綴注釋,我們只需要判斷是否存在belongCurrentLine,如果存在belongCurrentLine,表示不能將其當(dāng)作前綴注釋。
if (hasTrailingComments(parentNode)) {
+ const { start:{ line: currentLine } }=parentNode.loc;
//traverse
// @ts-ignore
parentNode.trailingComments.forEach((comment) => {
+ const { start:{ line: currentCommentLine } }=comment.loc;
+ if(currentLine===currentCommentLine){
+ comment.belongCurrentLine=true;
+ }
+ //屬于當(dāng)前行才將其設(shè)置為后綴注釋
- if (isReserveComment(comment, commentWords))
+ if (isReserveComment(comment, commentWords) && comment.belongCurrentLine) {
trailReserve = true;
}
});
}
發(fā)布到線上
我現(xiàn)已將代碼發(fā)布到線上
安裝
yarn add @parrotjs/babel-plugin-console
使用
舉個(gè)例子:新建.babelrc
{
"plugins":[["../dist/index.cjs",{
"env":"production"
}]]
}
以上就是babel插件去除console示例詳解的詳細(xì)內(nèi)容,更多關(guān)于babel插件去除console的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
js實(shí)現(xiàn)鼠標(biāo)拖動(dòng)功能
本文主要介紹了js實(shí)現(xiàn)鼠標(biāo)拖動(dòng)功能的實(shí)例代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
JS中const對(duì)于復(fù)雜類型變量和普通類型變量的區(qū)別詳解
我們?cè)陂_(kāi)發(fā)的過(guò)程中一定常常發(fā)現(xiàn)const關(guān)鍵字定義的簡(jiǎn)單類型變量不可以改變,但是你如果定義的是一個(gè)復(fù)雜類型變量(比如對(duì)象)的話對(duì)里面屬性的增刪改查是可以的,那這又是為什么呢,接下來(lái)就來(lái)和小編一起探討一下吧2023-11-11
Js得到radiobuttonlist選中值的兩種方法(推薦)
下面小編就為大家?guī)?lái)一篇Js得到radiobuttonlist選中值的兩種方法(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
uniapp開(kāi)發(fā)微信小程序遇到的問(wèn)題筆記
這篇文章主要給大家介紹了關(guān)于uniapp開(kāi)發(fā)微信小程序遇到的問(wèn)題的相關(guān)資料,比較適合第一次使用uniapp?開(kāi)發(fā)微信小程序的伙伴,或者沒(méi)有過(guò)實(shí)戰(zhàn)經(jīng)驗(yàn)的小伙伴參考,需要的朋友可以參考下2023-01-01
js實(shí)現(xiàn)編輯div節(jié)點(diǎn)名稱的方法
這篇文章主要介紹了js實(shí)現(xiàn)編輯div節(jié)點(diǎn)名稱的方法,可實(shí)現(xiàn)針對(duì)div節(jié)點(diǎn)名稱的編輯及樣式的選擇效果,并且分別針對(duì)IE與FF瀏覽器的樣式進(jìn)行了選擇與控制,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12

