前端項目模塊化的實踐1：搭建 NPM 私有倉庫管理源碼及依賴

如下是關於前端項目模塊化的實踐，包含如下內容：

1. 搭建 NPM 私有倉庫管理源碼及依賴；
2. 使用 Webpack 打包基礎設施代碼；
3. 使用 TypeScript 編寫可靠類庫

• 使用 TypeScript 的收益
• 使用 Mocha/Jest 進行單元測試 [實現中]

本文是關於前端項目模板化的第1部分

使用 Docker 搭建私有NPM倉庫

關於 Docker 的使用不在本文之中，請自行參考其餘文檔。

通過測試， keyvanfatehi/sinopia 可用。

1. 將 docker image 拉下來

docker pull keyvanfatehi/sinopia

1. 將 keyvanfatehi/sinopia 跑起來

docker run --name sinopia -d -p 4873:4873 keyvanfatehi/sinopia

個人 docker 主機名是 ubuntu-17，此時經過 http://ubuntu-17/4873 能夠訪問私有NPM 倉庫網頁。

發佈 JavaScript 類庫

添加示例類庫項目 myGreeting

mkdir myGreeting
cd myGreeting
yarn init -y # npm init -y
touch index.js

在 index.js 內添加以下內容

let greeting = function(name) {
    return 'Hello ' + name;
}

module.exports = greeting;

這份代碼導出了一個函數，已經能夠發佈和被依賴了。

1. npm adduser

初次使用這個私有倉庫須要添加用戶

npm adduser --registry http://ubuntu-17:4873

1. npm publish

再把上面的代碼發佈上去

npm publish . --registry http://ubuntu-17:4873

NPM 有本身的版本和發佈策略，能夠使用如下命令查看幫助文檔

• npm help version
• npm help publish

發佈可能由於版本問題失敗，追加謂詞 --force 可強制發佈但並不是是常規操做。

發佈後的管理頁面圖示

引用已發佈的類庫

添加示例業務項目 myDemo

mkdir myDemo
cd myDemo
yarn init -y # npm init -y
touch index.js

引用 myGreeting

yarn add myGreeting --dev --registry http://ubuntu-17:4873

在 index.js 內添加以下內容

const myGreeting = require('myGreeting');

(function() {
    let greeting = myGreeting('Rattz');
    console.log(greeting);
})();

運行起來

node index.js
Hello Rattz

至此私有NPM倉庫搭建、類庫發佈、依賴引用的部分已經完成。

項目所使用源碼已發佈 github，jusfrw 原創