Vue.js构建你的第一个包并在NPM上发布的方法步骤

2020-06-16 05:57:22易采站长站整理

description属性指包的描述信息,写上去好让大家知道你这个包是干嘛用的
main属性指定了包加载的入口文件,require(‘moduleName’)就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。
scripts属性指定了运行脚本命令的npm命令行缩写,比如build指定了运行npm run build时,所要执行的命令。
files属性可以指定哪些文件需要被发布到npm上,比如这里指定了dist文件夹里的所有文件

你可以在npm官方文档查看更多关于package.json的知识

打包

打包工具这里我使用的是Bili,一个强大的速度快,零配置的打包工具。

开始安装打包工具:


$ npm install --save-dev bili
$ npm install --save-dev rollup-plugin-vue
$ npm install --save-dev vue-template-compiler

然后在项目根目录下创建一个bili.config.js配置文件,配置如下:


module.exports = {
banner: true,
output: {
extractCSS: false,
format: ['umd'],
moduleName: 'KuButton'
},
plugins: {
vue: true
}
}

完成后,你只需要执行一个命令就打包完成,就这么简单:


$ bili

打包成功后,在项目根目录下会生成一个dist文件夹,里面有个index.umd.js文件

在npm上分享你的成果

到这里,你的vue插件就开发完成了。剩下最后一步,就是在npmjs上发布你的插件!
但前提是你需要有一个npmjs账号,如果没有的话需要去注册一个,有的话可以跳过这一步。

打开终端,输入:


$ npm login
// 回车后,输入你注册npmjs时填写的用户名,密码和邮箱
// 登录成功后,会提示:Logged in as <username> on https://registry.npmjs.org/.

查看当前npm用户登录情况:


$ npm whoami
// 如果登录成功,输出的是登录的用户名

检查以上步骤都没问题后,进入刚刚完成的ku-button项目目录,开始发布:


$ npm publish

执行成功后,你的插件就正式发布成功了!!🎉

后续如果要更新插件,只需要增加package.json里的version版本号,然后再次执行npm publish发布更新就可以了!

项目中使用刚发布的插件

你可以像安装其他插件一样:


$ npm install --save ku-button

或者


$ yarn add ku-button

接着,在main.js引用: