wecom-hgc
v0.1.1
Published
微汇管车UI组件
Downloads
3
Readme
wecom
Project setup
yarn install
Compiles and hot-reloads for development
yarn serve
Compiles and minifies for production
yarn build
Lints and fixes files
yarn lint
打包组件
组件发布到npm上之前,需要进行打包。在 vue-cli4 中我们通过以下命令可以将一个单独的入口打包成一个库:
// target: 默认为构建应用,改为 lib 即可启用构建库模式
// name: 输出文件名
// dest: 输出目录,默认为 dist,这里我们改为 lib
// entry: 入口文件路径
vue-cli-service build --target lib --name lib [entry]
要注意的是在库模式中,打包出来的库中是不包含 Vue 的。 然后我们修改一下 package.json 文件,就像下面这样:
"scripts": {
"lib": "vue-cli-service build --target lib --name wecom --dest lib packages/index.js"
}
接着执行 npm run lib 就能生成库啦,看看左侧的目录是不是多了个 lib 文件夹,那个就是我们要发布的东西。 补充下,lib 目录下面的 js 之所以有好几种,是因为有两种规范(common 和 umd)、是否压缩(min)和映射(map)的区别,暂且知道有这么回事就行,不用深究。
发布组件
万事俱备,就差发布了。先修改一下 package.json 文件:
{
"name": "wecom",
"version": "0.1.0",
"private": false,
"main": "lib/wecom.umd.min.js",
"license": "MIT"
}
在根目录下新建一个 .npmignore 文件,内容和 .gitignore 差不多。
最后执行 npm login 登入最开始注册好的 npm 账号,再执行 npm publish 发布即可,就这么简单的两步就可以,过一会在 npm 上就能搜到了。当然前提是你有个 npm 账号,没有的话去注册一个吧,很 easy 的,然后还要搜下你的 npm 包名是否有人用,有的话就换一个。
更新组件
随着组件的开发迭代,我们会需要更新组件。更新组件流程很简单: 随着组件的开发迭代,我们会需要更新组件。更新组件流程很简单:
打包为npm包
npm run lib
发布npm包
登录(未登录需登录验证npm账号)
npm login
更新版本号(xx.xx.xx)
npm version patch修改版本号最后一位,表示一些补丁和修复
npm version minor修改版本号第二位,表示一个小版本的更新
npm version major修改版本号第一位,表示一个大版本的更新
发布
npm publish