要建一個工程，首先得明白這個工程的作用。因為現在公司還有部分工程是老工程，所以，這次規劃除了針對新工程，還需要能夠將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的模組化語法。也就是import和export。

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

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

按需引入

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

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

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

// 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 = _=>{};