寫乙個babel外掛程式實現按需打包的功能

2021-09-11 12:47:52 字數 4049 閱讀 3465

背景：當我們同時引入乙個包中的兩個方法，有兩種形式

第一種形式

import  from 'lodash';


複製**
第二種形式

import flatten from 'lodash/flatten';


import join from 'lodash/join';


複製**
對比兩種形式，我們可以看出：

第一種方式的引入會把整個lodash包引進來 第二種方式是指引入整個包中的兩個方法

顯然我們要用第二種

但是一般的專案中 大部分都是以import解構的形式，所以在這裡我們就寫乙個外掛程式，當我們寫成第一種形式引入的時候，利用外掛程式轉化成第二種形式

這是我們要寫的外掛程式的功能

第一步：初始化乙個webpack的專案

npm i webpack webpack-cli babel-core babel-loader babel-preset-env babel-preset-stage-0 -d


複製**
在webpack中，提供了mode變數，用於配置執行環境，mode的值可以為development，表示的是開發模式，或者是production，表示的是生產模式。

在package.json中寫入編譯的命令

"scripts":


複製**
第二步：建立乙個專案結構
webpack-plugin // 專案名稱


dist // 打包輸出目錄


bundle.js // 打包輸出的檔案


src // 主要邏輯


index.js // 專案的入口檔案


./babelrc // 語法解析配置


package.json


webpack.config.js


複製**
第三步：寫webpack的配置檔案
const path = require('path');


module.exports = ,


// 配置


module: ]}


}複製**
第四步：配置.babelrc
,


"syntax-decorators"]]}


複製**
第五步：index.js中寫入對比指令碼
// import  from 'lodash'


import flatten from 'lodash/flatten'


import join from 'lodash/join'


複製**
先引入後面的這兩句，然後打包一下

hash: fcb0bd5d9734b5f56676


version: webpack 4.2.0


time: 346ms


built at: 2018-3-27 21:24:33


asset size chunks chunk names


bundle.js 21.3 kib main [emitted] main


entrypoint main = bundle.js


[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 823 bytes [built]


[./src/index.js] 286 bytes [built]


+ 15 hidden modules


複製**
看到這樣打包後的**，我們發現這種方式引入 打包後的大小是。21.3k

然後注釋掉後兩行，只引入第一行

hash: aa8b689e1072463fc1cd


version: webpack 4.2.0


time: 3277ms


built at: 2018-3-27 21:30:22


asset size chunks chunk names


bundle.js 483 kib main [emitted] main


entrypoint main = bundle.js


[./node_modules/webpack/buildin/amd-options.js] (webpack)/buildin/amd-options.js 82 bytes [built]


[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 823 bytes [built]


[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 521 bytes [built]


[./src/index.js] 47 bytes [built]


+ 1 hidden module


複製**
這次打包後的大小是 483k

通過對比 證實了我們所說的兩種引入方式的區別

第六步：那我們就來寫寫這個外掛程式吧！

先對比一下兩種引入方式的抽象語法樹的差別

通過對比我們發現，只是importdeclaration不相同

const babel = require('babel-core');


const types = require('babel-types');


let visitor = , 這裡是指定 我們在引用哪個庫的時候使用這個外掛程式


importdeclaration(path, ref=}) /$`))


));path.replacewithmultiple(newimport)


}} } 


const code = "import from 'lodash';";


let r = babel.transform(code, 


]})複製**
在建立替換邏輯的時候，types上的方法 用github上的這個**，哪個不會搜哪個，媽媽再也不用擔心我的學習。嘻嘻

新建乙個資料夾 babel-plugin-demand-loading 放到node_modules中，再新建乙個index.js檔案，將下面的**放進去，再然後進入這個資料夾 npm init -y初始化乙個package.json檔案，裡面的入口檔案寫成index.js

需要注意的事項：

第一： babel外掛程式的資料夾命名，必須以 babel-plugin-***(你寫的外掛程式名)命名，否則引入不成功 第二： babel外掛程式返回的是乙個物件，裡面有乙個訪問者模式的visitor物件，裡面是我們的轉化**

const babel = require('babel-core');


const types = require('babel-types');


module.exports = , 這裡是指定 我們在引用哪個庫的時候使用這個外掛程式


importdeclaration(path, ref={}) = ref


let node = path.node;


let specifiers = node.specifiers


if (opts.library == node.source.value && !types.isimportdeclaration(specifiers[0])) /$`))


));path.replacewithmultiple(newimport)}}


}}複製**
最後 npm run build 編譯後，發現打包後的大小是。20多k說明我們的外掛程式起作用了。

到這裡你是不是也會了呢？嘻嘻！

不要厭煩熟悉的事物,每天都進步一點;不要畏懼陌生的事物,每天都學習一點;

js寫乙個外掛程式

分號開頭，用於防止 壓縮合併時與其它 混在一起造成語法錯誤 而事實證明，uglify壓縮工具會將無意義的前置分號去掉，我只是習慣了這麼寫 function 立即執行函式，閉包，避免汙染全域性變數 通常乙個外掛程式只暴露乙個變數給全域性供其它程式呼叫 還有其它寫法，運算子 函式體 括號 例 funct...

VB寫乙個IE外掛程式

用vb編寫ie外掛程式 實現方法如下 首先需要獲得iobjectwithsite介面的定義，你下載個olelib.tlb,包含了介面定義。然後建立乙個 activex dll工程,在工程中引用這個tlb檔案，並且引用microsoft html object library mshtml.dll 和...

寫乙個Jquery字型外掛程式

在製作專案的過程中,為了給登入使用者提醒功能,需要將當前的提示資訊字型顏色變換幾次,以達到引起使用者注意的目的.具體做法就是當滑鼠移動過提醒資訊的時候,當前的字型顏色能夠每隔50ms變換一次.非plugin版本的製作方法 初次接觸到這個需求的時候,很多人都想到利用settimeout來做,我也不例外...