发布插件(组件)到npm

接着上一篇vue中编写通过方法调用的组件我们已经开发完成一个插件，接下来将其发布到npm,供他人使用同时也方便后续其它地方复用。
接下来的打包主要是使用vue-cli3脚手架搭建的环境。cli2的打包发布可以看这篇文章 教你一步步封装vue组件并发布到npm。

1、修改项目package.json

vue-cli 3.x 提供了构建目标的命令,不用再去配置webpack.config,直接新增命令搞定

1. target: 默认为构建应用，改为 lib 即可启用构建库模式

2. name: 输出文件名

3. dest: 输出目录，默认为 dist，这里我们改为 lib/lib

4. entry: 入口文件路径，默认为 src/App.vue，这里改为src/components/Toast/index.js

"lib": "vue-cli-service build --target lib --name EcToast --dest lib/lib src/components/Toast/index.js"

接下来运行命令就行了npm run lib

完成后可以看到lib中多了个文件夹

• lib/EcToast.common.js：一个给打包器用的 CommonJS 包 (不幸的是，webpack 目前还并没有支持 ES modules 输出格式的包)

• lib/EcToast.umd.js：一个直接给浏览器或 AMD loader 使用的 UMD 包

• lib/EcToast.umd.min.js：压缩后的 UMD 构建版本

2、待发布组件新增package.json

注意这里的package.json和第一步的不是同一个，这是配置你打包好后需要发布的组件的包信息

• 进入库目录这里是lib,可以在打包时将其改为其它名称

cd lib

• 初始化项目

npm init

• 修改项目信息
  • name: 包名，该名不能和已有的名称冲突；
  • version: 版本号，不能和历史版本号相同；更新代码后这里修改版本号，然后重新npm publish即可。
  • main: 入口文件，应指向编译后的包文件；修改为指定文件lib/EcToast.umd.min.js
  • private：是否私有，需要修改为 false 才能发布到 npm；

npm init 前三个会自动生成，第四个新增进去即可

{
  "name": "ec-toast",
  "version": "1.0.1",
  "description": "移动端弹出框",
  "main": "lib/EcToast.umd.min.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "private":false
}

3、发布组件

• 使用npm login进行登陆
• 使用npm publish进行发布
• 可能会遇到报错，看是不是镜像是淘宝镜像造成的，将其改回即可

  npm config set registry http://registry.npmjs.org/
  

发布成功后我们可以在npm官网查找到，刚发布的库。

4、使用发布的组件

使用时直接npm install

this.$Toast.info({duration: 1000, content:'弹出提示测试！'});