手把手发布一个npm包及相关注意事项

前言

这里是发布npm包的具体步骤，手把手教会，相关原理在其他文章下面有
原理好文章指路
10分钟教你快速开发一个vue插件并发布npm

手把手教你封装一个 vue component

发布之前，需要注册一个npm账号
https://www.npmjs.com/ 这里注册

具体步骤

1.新建项目

---

$ npm install -g vue-cli
$ vue init webpack-simple my-project
$ cd my-project
$ npm install
$ npm run dev

如需安装less
$ npm install less less-loader --save-dev

2.代码

---

src 下面新建一个components文件夹。里面放各种组件文件夹。
例如新建input文件夹 里面有index.js 和Input.vue文件

// input.js
import Input from './Input.vue'
export default Input

// Input.vue
export default {
  name: 'ui-input', // 这是注册组件的名字。也是要使用这个npm包的标签名字
  props: {
  },
  data () {
    return {
    }
  },
  mounted () {
  },
}

// main.js
import uiInput from './components/input'
const jovoUI = {
  uiInput,
  uixxx  // 其余vue组件
}
if (typeof window !== 'undefined' && window.Vue) { 
  window.Vue.use(jovoUI)
}
jovoUI.install = function (Vue, options) {
  Vue.component(uiInput.name, uiInput)
}
export default jovoUI
// 跑项目的时候测试用,在本地测试的时候，就把组件注册在本地，app.vue里面引用组件调试
// Vue.component('ui-input', uiInput)
// new Vue({
//   el: '#app',
//   render: h => h(App)
// })

需要在本地测试的时候,解开上面的注释，在app.vue或者其他vue文件里测试

// app.vue
<div id="app">
  <ui-input></ui-input>
</div>

3.发布准备

---

1. .gitignore文件 删掉dist忽略
2.
// webpack.config.js
之前是
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  }
改为
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    // filename: 'build.js' 这是原来的
    filename: 'jovoui.js', // 打包后js的名字，自己取,本地调试时，新加的这些东西都要注释掉，解开filename: 'build.js注释
    library: 'jovoui',  // 使用require引用时的名字
    libraryTarget: 'umd', // 指定你的模块输出类型，可以是commonjs,AMD,script形式,UMD模式
    umdNamedDefine: true
  }
3. // package.json文件 
// 文件第一行的 name 是包的名字，不能和已有的npm包重名，否则npm publish时会提示你是否登录，其实你已经登陆了 例如"name": "jovocom",
private改为false
"main": "dist/jovoui.js" 这条是新增的，是打包文件入口，之前是build.js,参考第二条取得打包名字

4. // index.html 
// 本地调试时，需要把第一行解开,以及main.js的注释解开
<!-- <script src="/dist/build.js"></script> -->注释
<script src="/dist/jovoui.js"></script>

4.注意事项

---

1.每次发布之前，要在package.json改版本号

2.npm run build, // 会在生成一个dist文件，里面有jovoui.js和jovoui.map

3.npm publish，// 若有错执行第5条，判断是否登录，未登录执行第四条

4.npm login your account your password your@email.com

5.npm whoami // 判断是否登录

6.每次发布完npm包再本地调试npm时，需要解开以下注释
(1)index.html 改为 <script src="/dist/build.js"></script> // 本地调试时
(2)webpack.config.js 里面的注释切换成build那个 新增的注释掉
(3)main.js 本地注册的部分解开注释
(4)npm run build 打包一次

7.更新记一次坑，有一次不知道怎么的切换了淘宝源，npm login一直登不上，报错conflict什么的。要切换到npm官方仓库上，这个时候npm login就能登上了。最后发布npm是发布到官方npm上，不是cnpm,所以要是只能有npm才能下载
$ npm install -g nrm
$ nrm use taobao
$ nrm use npm // 用这句使用npm

8.npm publish出错，说包的名字跟已有的包太相似了，叫换一个，然后换了一个，就成功publish了，所以取名字还是要独特一点，符合这个组件特性一点

使用

npm发布成功使用。
$ npm install xx // 这是发布的包的名字，就是package.json里面的name
每次包更新之后再次安装可以 $ npm install xx@latest
// main.js
import xx from '包名'
Vue.use(xx)
// 某个vue文件
<ui-input></ui-input> // 这是当初注册组件的名字