react 组件库脚手架

安装依赖

• node.js 需要 10 以上的版本,下面提供 nvm 方式安装

$ nvm install 10.16.3
$ nvm use 10.16.3
# 设置默认node版本
$ nvm alias default v10.16.3
# npm 设置淘宝源
$ npm config set registry https://registry.npm.taobao.org

• 本地开发

# 依赖包安装
$ npm install
# 启动开发环境
$ npm run start
# changelog生成
$ npm run changelog

• 发布

npm run build
git tag -a 1.0.1 -m '备注'
git push origin 1.0.1

模块调试

特定场景需要在应用项目调试模块， 又不想每次提交 git，再执行npm i命令来查看效果，导致效率低。 可以使用yarn link

 // 进入私有包目录
 cd pudge
 // 创建`link`
 yarn link
 // 进入项目目录
 cd ../chebaba
 // 将`@dndc/pudge-basic` link到项目
 yarn link @dndc/pudge-basic
 // 取消link
 yarn unlink @dndc/pudge-basic

FAQ

package.json 中的 module 作用？

早期 npm 包基于commonJS规范,形式如下

"name": "@dndc/pudge-basic",
"version": "1.0.0",
"main": "lib/index.js",

当require('@dndc/pudge-basic')的时候，会根据main字段查找入口文件. 而es2015,js拥有了ES Module,比之前的模块化方案更加优雅。 其中一个优点tree shaking能把我们我们JS中无用的代码去掉。

commonJS规范的包是以 main 字段表示入口文件，如果使用ES Module也用main字段，会造成冲突， 所以添加module，形式如下

"name": "@dndc/pudge-basic",
"version": "1.0.0",
"main": "lib/index.js",
"module": "es/index.js",

webpack从版本 2 开始也可以识别pkg.module字段。 如果存在module字段，会优先使用。

参考链接

• dumi
• Ant Design
• UmiJS