1. 程式人生 > >建立一個前端的工具庫---建立npm工程

建立一個前端的工具庫---建立npm工程

要建一個工程,首先得明白這個工程的作用。因為現在公司還有部分工程是老工程,所以,這次規劃除了針對新工程,還需要能夠將js打包成壓縮檔案提供給老工程使用標籤引入。打包工具選擇webpack,單元測試集成了karma+jasmine。好了,現在就開始搭建吧!

npm標準工程

因為是npm工程,所以本地首先要有node環境,並且裝上npm。如果沒有配置的請自行到官網下載安裝。

當環境都配置好了之後我們就可以使用命令npm init,然後依次填入資訊,就可以生成一個package.json檔案了。

這裡寫圖片描述

生成的package.json檔案如下:

{
  "name
": "js-utils", "version": "1.0.0", "description": "", "main": "src/index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "xuchao", "license": "ISC" }

然後我們建一個src資料夾來存放自己的程式碼。再新建一個index.js。目錄結構如下:

|-- src                             
    └─index.js                            
|-- package.json                    
|-- README.md                       

至此,我們已經搭建了一個最簡單的npm工程。這裡按照前面介紹的配置好的話,就可以使用npm publish來提交自己的程式碼了。

關於模組化

這裡我統一使用的是ES6的模組化語法。也就是importexport

主要是因為目前公司的新工程都是使用webpack打包。也都支援這種語法。此外個人比較喜歡這種語法。

而對於老工程,我們後面給工具工程引入webpack,然後我們可以按需打包出我們想要的js工具集合,然後通過<script>標籤引入。

按需引入

其實看了上面的步驟,發現搭建一個npm工程還是很簡單的。也的確如此,我們更加關心的是這個工程的程式碼實現方式。比如說,一個工具類隨著時間的積累,必然是十分龐大的。我們一個專案可能用到了其中的十分之一都不到。那麼,如何做才能讓我們的工具庫支援按需載入呢?

按照功能來分開我們的工具函式

比如說日期相關的工具函式我們都放在date資料夾中,然後統一提供一個index.js來彙總這些工具函式。然後在跟目錄的index.js中再彙總各個分類的工具函式。這裡要注意的是根目錄的index.jsexport的寫法。

// utils/src/index.js
// 這種寫法是輸出一個物件,並不能實現按需載入
export default {
    module1: module1,
    module2: module2
}

// main.js
// 一旦import就是載入所有,裡面的分類只是這個大物件的屬性而已
import utils from 'utils';

// 即使你這裡只用了其中一個模組
utils.module1();

// utils/src/index.js
// 這種寫法支援按需載入
export {
    module1: module1,
    module2: module2
}

// main.js
// 我們只需要引入我們需要的模組就好
import {module1} from 'utils';

// 這裡只用到了一個模組
module1();

從上面我們可以看到兩種相近的export的寫法其實差別還是很大的。這些知識其實閱讀過ES6模組的語法的人也應該都清楚。

當然,我們很多時候如果追求絕對的按需載入的話,可能會導致我們的函式分佈的過於碎片。這很不利於維護和文件的編寫。合理的分類很多時候是在做一種權衡。

慎用ES6

雖然在上面的模組化中我們使用了ES6的語法,但是除此之外還是建議不要使用ES6的語法。

因為ES6目前需要babel轉碼之後才能真正被瀏覽器執行(雖然少部分瀏覽器實現了部分ES6的語法)。但是很多時候我們的腳手架(比如我用的vue-cli)在打包的時候並不會去掃描node_moduls資料夾底下的js檔案。因為node_moduls裡面的檔案太多了。這時候如果你的工具程式碼使用了ES6語法的話,被別的工程引入,打包的時候會報錯。

// good

var a = 123;

// bad

const a = 123;
let b = 123;

// good

function a() {
}

// bad

const a = _=>{};