寫乙個自己的打包工具 打包原生專案

背景

早期寫了乙個很老的專案，目前一直在迭代維護。

沒有用到模組化的思想，也沒有用到目前流行的框架，就是引入了一些簡單的樣式庫。

目前遇到的問題有：

1、**未做壓縮等處理，占用空間比較大

2、每次更新版本都需要清一下快取才能讀取到最新的靜態資源

3、有一些新的es6語法和老的語法混用之後相容性不佳

所以就想著自己寫乙個簡單的打包工具吧

需求分析

1、迴圈讀取本地檔案，分離不同型別檔案

2、用babel對js檔案做一次轉換後壓縮，壓縮css檔案

3、對js、css檔案做hash計算，並在輸出的檔名後面新增hash小尾巴

4、修改html中的引用鏈結，壓縮html

功能實現

1、迴圈讀取本地檔案，分離不同型別檔案。

這裡用的最簡單的正規表示式來區分不同的檔案型別，主要用到了node中的fs模組和path模組。

const readregdirsync = (filepath, reg, patharray) =>

pa.foreach(
function
(ele) 
else
}});
return
patharray
};

具體的文件點這裡：fs | node.js api 文件

path | node.js api 文件

另外需要注意的是，不同作業系統的路徑分隔符有所不同。

最後會得到類似這樣的檔案路徑陣列：["my_source\css\global.css", "my_source\css\index.css"]

2-3、對檔案進行處理

js使用babel對語法進行處理，用babel-minify壓縮整個檔案，css用clean-css來進行壓縮

然後用crypto模組來計算檔案內容的hash值，給檔案新增乙個hash的小尾巴。

最後把對應的檔名返回，建立乙個依賴對應表，方面我們後續替換路徑使用。

const fileanalyser = (filepath, dirpath, filetype) =>).code;

if (mode === 'production') =babelminify(filecontent, 
});writecode =code;
} else
if (mode === 'development') 
} else
if (filetype === 'css') ).minify(filecontent).styles;
} else
if (mode === 'development') 
}let dir =path.parse(filepath).dir;
let sourcedir = dir.slice(dir.indexof("\\") + 1);
let nowname = path.parse(filepath).name + '.' + crypto.createhash('md5').update(writecode).digest('hex') + (filetype === 'script' ? '.js' : '.css');
let filedir =path.join(dirpath, sourcedir);
let filename =path.join(filedir, nowname);
if(mkdirssync(filedir)) 
};

然後將得到的檔名和原始的檔名建立乙個依賴對應表

cssdependencies[path.parse(cssarray[i]).base] = path.parse(csspath).base;

4、修改html中的引用鏈結

用cheerio來解析html，然後根據剛才我們存下來的依賴對應表來修改其中的鏈結引用。

最後再用html-minifier壓縮一下html。

const htmlanalysescript = (filepath, scriptdependencies, cssdependencies, dirpath) =>}}

const getcss = $('link');
for (let i = 0; i < getcss.length; i++) }}
let dir =path.parse(filepath).dir;
let sourcedir = dir.slice(dir.indexof("\\") > -1 ? dir.indexof("\\") + 1: dir.length);
let filedir =path.join(dirpath, sourcedir);
let filename =path.join(filedir, path.parse(filepath).base);
if(mkdirssync(filedir)) ));
return
filename}};

來看看最後的效果

對於我自己的專案來說，還是很有用的，每次更版本不用清一些快取，也不用擔心一些簡單的相容性問題，最主要的是整個專案的大小縮小了很多。

當然最好的情況自然是用模組化的方式來寫專案。

總結一下：node真滴好用！很多模組已經很成熟了，文件也很完整，想做什麼功能一搜就有！

目前做的功能還是很單薄的，希望能給想自己寫乙個小工具的人，提供一些可行的思路。

這個小工具的不足之處：

1、只對js、html、css檔案做了處理，下面應該還要對等靜態資源做處理。

2、打包速度還是有點慢原因在於：讀取檔案的時候是每讀一種檔案都迴圈一次的，這個邏輯應該可以改成讀乙個檔案識別為某個檔案型別就進行處理。

關於linux打包工具的一些總結

linux目前對於檔案的打包工具有以下幾種 1 compress 打包 uncompress 解包 這種是最古老的檔案打包方式，基本不怎麼用，就此略過吧 2 gzip 打包 gunzip 解包 zcat 檢視 這種命令對檔案進行打包，打包完成後的字尾一般為.gz格式。主要使用格式 gzip opti...

Python 官方推薦的一款打包工具

在thoughtbot，我們用ruby和rails工作，但通常我們總是嘗試使用最合適的語言或者框架來解決問題。我最近一直在探索機器學習技術，所以python使用地更多。ruby專案和python專案處理之間的乙個很大的區別就是管理依賴關係方式的不同。目前在python語言中沒有類似於bundler或...

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

背景 當我們同時引入乙個包中的兩個方法，有兩種形式 第一種形式 import from lodash 複製 第二種形式 import flatten from lodash flatten import join from lodash join 複製 對比兩種形式，我們可以看出 第一種方式的引入會...