一： 如何快速搭建一個元件庫

首先，我們介紹一個快速包裝元件庫的工具：https://github.com/yanhaijing/jslib-base

按照文件來，就簡單幾步：

npx @js-lib/cli  mylib
jslib new mylib

然後我們src 目錄新增我們自己的檔案庫，然後以 index.js 匯出檔案。

例如：

index.js 是對外提供了函式或者變數介面

// import 'babel-polyfill';
import jsBridge from './utils/js-bridge';
import * as htmlUtils from './utils/html-utils';
import DOMAIN from './utils/DOMAIN';
import LS from './utils/local-storage';
import { uSmartInit } from './utils/init';
import setTitleBar from './utils/set-title-bar';
import toRsa from './utils/rsa'
import i18n from './utils/plugins/yx-i18n/index'

export {
    jsBridge,
    htmlUtils,
    DOMAIN,
    LS,
    uSmartInit,
    setTitleBar,
    toRsa,
    i18n
};
 

我們執行npm run build ，進行打包

npm run build 
# 釋出到遠端
git push 

然後打 tag之後，生成對外下載的連結，我們以 gitlab 為例

二：使用元件庫

本地專案按照元件庫，使用以下方式，獲取最新修改的庫

// 新增
//  yarn add git+<倉庫地址>#<tag版本號>，例如
yarn add git+ssh://git@szgitlab.name.com:222567575/web/yx-base-h5.git#v1.0.1
// 更新的時候，可以先刪除 老包，然後安裝新包，主要是 tag 的改動，例如
yarn remove git+ssh://git@szgitlab.name.com:222567575/web/base-h5.git#v1.0.1
yarn add git+ssh://git@szgitlab.name.com:222567575/web/base-h5.git#v1.0.2
 

以上是生成一個 npm 包的流程。

知識附錄：

1： npm package git URL formants

npm package git URL formants 可以參考 npm 文件

由於npm有快取機制，所以，當你更新完庫的程式碼的時候，執行 npm install 並不會拉取最新的程式碼，所以我們可以打 tag 的形式實現更新。

2： 關於模組npm 官方給出了明確的定義

A module is any file or directory in the node_modules directory that can be loaded by the Node.js require() function.

To be loaded by the Node.js require() function, a module must be one of the following:

• A folder with a package.json file containing a "main" field.
• A JavaScript file.

注意： 不是所有的模組都要求包含一個package.json檔案，因為不是所有的模組都是 npm包，但是 npm 包一定是包含package.json的模組。

在 node 程式的上下文中，模組也可以是從一個檔案載入而來的。例如

var req = require('request')

我們可以說“變數req指向請求模組”