发布一个组件到npm,更新版本
准备工作:注册npm账号: npm官网
- 一定记得验证邮箱,不然发布包时会报错: E403
初始化一个简单的组件项目
新建组件文件Main.vue, 组件入口文件index.js
-
Main.vue
<template> <div class="container"> <div>{{ msg }}</div> <div>{{ propData }}</div> </div> </template> <script> export default { name: "simple-waterfall-zx", data() { return { msg: "A simple waterfall component" }; }, props: { propData: { type: String, default: "default data" } } }; </script> <style lang="scss"> .container { text-align: center; } </style>
-
index.js
// 用于将Main.vue暴露出去 import Main from "./src/component/Main"; import _Vue from "vue"; Main.install = Vue => { if (!Vue) { window.Vue = Vue = _Vue; } Vue.component(Main.name, Main); }; export default Main
修改package.json
- 增加"main"字段,指定入口文件
- require方法可以通过这个配置找到入口文件
- 修改“private”字段值为false(若为true则无法发布到npm)
修改webpack.config.js
- 修改entry和output
- 开发环境下从main.js进入App.vue,生产环境下从index.js进入Main.vue
- 开发环境下从main.js进入App.vue,生产环境下从index.js进入Main.vue
修改index.html
- 修改js文件的引用
删除source-map在生产环境下的生成
发布到npm
npm run build
npm publish
更新npm包
-
修改package.json中的版本号version
-
npm run build
-
npm publish