本文首發在 掘金
關於
前兩天在使用webpack搭建移動端web的時候,需要使用到flexible.js動態修改html的font-size。考慮到只有幾行代碼，我想把flexible.js鑲嵌到<head>中,同時我希望能夠隨時修改它的源碼,並且最後輸出到html中是壓縮過後的代碼。
由於沒有找到類似於我描述的這類插件，我決定自己動手寫一個。
什麼是webpack loader?
webpack loader 是 webpack 的預處理工具,除了javascript,還可以處理任何靜態資源文件。webpack loader 相當於gulp的task,我們可以通過它 將typeScript轉換成javascript,可以將圖片轉換成 data URL等等。
正文:如何編寫併發布webpack loader
1. 創建一個github倉庫
具體如何創建我就不再贅述了,沒創建過的同學到github官網摸索下就會了。倉庫名稱使用 xxx-loader。
初始化項目
- 首先簽出你的git倉庫
git clone https://github.com/Linnanli/easy-test-loader.git
- 初始化npm
npm init
keywords,author,license這幾個是比較關鍵的，keywords用於關鍵字檢索,author是插件的作者署名,license是你的軟件許可證。
- 創建.gitignore和.npmignore
因爲 node_modules 文件是不提交到git倉庫和npm的所以需要創建兩個配置文件,讓git和npm忽略掉它。
- 創建LICENSE軟件許可證
你想要使用什麼樣的許可證書可以到[license]上選擇並copy下來。
- 最後的目錄結構
編寫代碼
首先創建一個index.js文件,也就是這個項目的入口文件,這個index文件返回一個function,webpack獲取到這個方法後就會執行它並傳入一些參數。
//一個簡單的loader,獲取參數並返回給webpack或者下一個loader。
module.exports = function(source){
return `module.exports = ${source}`);
}
上面這個例子就是一個很簡單的例子，獲取數據並返回。我們可以在這個例子上多加幾行代碼,讓loader在requirejs代碼後可以直接返回一個可以內聯到html中的javascript。
module.exports = function(source){
// 替換source字符串中的回車符和換行符,並拼接到<script>標籤中
let result = source.replace(/\n/g, "\\n")
.replace(/\r/g, "\\r")
.replace(/(.*)/, `module.exports = "<script>$1</script>"`);
return result;
}
更多api和例子可以參考官網。
測試
首先我們需要在本地的webpack中調用到自定義的loader,可以使用npm link將loader鏈接到項目的node_modules目錄下。
- 將
easy-test-loader鏈接到全局環境中
npm link
控制檯輸出
npm notice created a lockfile as package-lock.json. You should commit this file.
up to date in 0.091s
C:\Users\2017-10-16\AppData\Roaming\npm\node_modules\easy-test-loader -> C:\Users\2017-10-16\Documents\github\easy-test-loader
- 在我們的web項目中鏈接
easy-test-loade,這時候就相當於把其他文件夾下面的easy-test-loader指向本項目下的node_modules文件夾下。
npm link easy-test-loader
最後控制檯輸出
C:\Users\2017-10-16\Documents\github\multi-page-webpack\node_modules\easy-test-loader -> C:\Users\2017-10-16\AppData\Roaming\npm\node_modules\easy-test-loader -> C:\Users\2017-10-16\Documents\github\easy-test-loader
最後我們在index.html中測試下easy-test-loader的功能是否正常
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<!-- 在模板中require flexible.js -->
<%= require('easy-test-loader!common/lib/flexible.js') %>
</head>
<body>
</body>
</html>
最後輸出的腳本我們可以在chrome中查看
發佈到 npm
上面我們已經確保測試通過,接下來就是發佈到npm上,然後我們以後就可以通過npm install命令直接下載使用了。
- 首先我們要先把代碼push到
github上
添加所有文件
git add -A
提交所有更改到暫存區
git commit -m "init"
push 到github
git push
- 發佈到npm
在發佈之前需要先註冊 npm 賬號,然後使用npm adduser將賬號添加至本地的npm。
$ npm adduser
將loader發佈到npm上(如果發佈失敗是重名的話,可以在package.json文件中修改name)
npm publish
- 下載easy-test-loader
npm install easy-test-loader --save-dev
安裝完成後我們在項目中 require 一下 easy-test-loader 測試下是否代碼沒有問題就OK啦。
最後
介紹我寫的loader插件 [inline-script-loader],支持內嵌到html中並壓縮js代碼,還支持腳本類型定義。
這裏還有一個用到inline-script-loader的小項目,大家可以做下參考 [activity-h5]
如果大家有好的建議可以聯繫我,有空就star下唄感謝支持。
謝謝支持
您的支持是我繼續寫作的動力。
