12 - Vue3 UI Framework - 打包发布 (2)

我们通过 npm 进行安装，在项目根目录下执行 bash ，并运行如下命令：

npm install sass -D npm install rollup-plugin-esbuild -D npm install rollup-plugin-vue -D npm install rollup-plugin-scss -D npm install rollup-plugin-terser -D

注意

-D 标识安装为开发依赖，不能省略

开始打包

在项目根目录下执行 bash ，并运行如下命令：

rollup -c

执行后，我们会在根目录下的 lib 文件夹下看到如下三个文件：

发布到 NPM

开始之前，我们需要在 package.json 中添加一些内容，用户配置组件库的位置和默认文件，代码如下：

{ "name": "jeremy-ui", "version": "0.0.3", "files": [ "lib/*" ], "main": "lib/jeremy.js", }

注意

发布到 npm 时，发布的项目名取决于配置中的 name 字段，发布的版本号取决于该配置中的 version 字段

每次发布时，发布的新版本号不得低于该项目以前发布过的任意版本号

然后，在项目根目录下运行 bash 并执行如下命令：

npm login

然后登录（输入用户名、密码和邮箱），登录成功后，再执行如下命令：

npm publish

注意

如果包名已经被别人发布过，那么这一步会失败，修改的包名重新打包、发布吧

如果发布错了，可以删除这个包，但是要求是 72 小时内，这里就不再展开了

发布成功后，我们可以登录 npm 查看一下：

使用 NPM 包

我们将项目切换到 website 分支，可以看到这个分支的组件都是通过 npm 进行安装的，不再是通过本地安装的了。当然，您也可以通过 bash 执行如下命令进行安装：

npm install jeremy-ui 项目地址