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引用:










