一: 如何快速搭建一个组件库
首先,我们介绍一个快速包装组件库的工具: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/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指向请求模块”