从零开始封装React UI 组件库并发布到NPM

Posted 2020-11-30 winyh

1.新建目录wui

（1）进入到 wui 目录 执行 npm init 命令初始化项目。更具提示信息填充将会生成的 package.json 文件。

（2）新建 webpack.config.js 打包文件。

（3）新建 README.md 项目说明文件。

（4）新建 .gitignore 项目忽略文件。

（5）安装webpack 用于编译 javascript 模块。

npm install webpack webpack-cli --save-dev



package.json 字段含义解释：
1.name 包名，如果有重名可以添加 scoped 前缀,例如（@winyh/wui）
2.verson 版本号，每次发布版本前需要递增修改版本号
3.description 包简介。
4.private 是否私有。一定要设置为 false
5.main 项目入口。
6.directorities 描述模块的结构,暂时可以忽略。
7.scripts 执行脚本，可以在这里添加自定义的执行脚本。
8.registory 仓库地址，设置代码所在仓库地址。
9.keywords 关键字，设置仓库的关键字，方便检索。
10.author 作者，可以输入作者名称。
11.license 许可协议。
12.bugs 提交地址。
13.homepage 项目主页。
14.devDependencies 开发环境依赖包记录。

 

发布：
1.修改package.json文件，添加 "private": false 设置当前组件库为非私有的。否则 npm publish 会报错。
2.修改 version 版本号，npm 发布版本时，会向上叠加（v0.0.1 -> v0.0.2)。发布前不修改版本号也会报错。
3.执行 npm login 登录 npm 账户（需要现在官网注册npm账号）。
4.执行 npm publish 发布最新版本。（发布成功后一般注册邮箱会收到发布版本的消息）