手摸手教你如何使用npm发布vue插件

最近心血来潮写了个vue图片预览插件image-ipreview（欢迎大家下载使用，并提供建议，后面我会持续迭代。笔芯~），研究如何用npm将它发布出去。下面是我发布成功的截图：

下面介绍的就是我在整个过程中，遇到的问题及其解决方案和心得。具体封装vue插件的过程，我就不写了，想必大家都了解的。
另附插件GitHub源码地址：image-ipreview

1.如何打包插件

有两种方式：

• 使用webpack打包。这就需要你手动配置大部分功能了，本人不太了解，有兴趣的可以自己尝试下。
• 使用vue-cli打包。这在vue官网中有比较详细的介绍，好处就是vue-cli本身就具有了webpack的一些功能了，基本不需要自己去搞。下面我就简单介绍下，如何用vue-cli打包插件。

2.vue-cli打包插件

在package.json文件的scripts脚本命令中，增加下面一条命令（这是我项目中的命令，大家看了下面命令的解释后，可自行配置。）：

"build:lib": "vue-cli-service build --target lib --name image-ipreview --dest lib ./src/index.js"

下面介绍下命令中的几个部分。
--target lib：target有好几个选项。这里是打包成一个库（lib），发布插件的话，一般就是lib。
--name image-ipreview： 打包生成的文件名。
-dest lib：打包生成的目录名称。这里是lib，默认为dist
./src/index.js：打包的入口文件。
打包成功后的文件如下：

在项目中用的话，一般用.css和.umd.min.js这两个文件。因此，发布插件的时候，你可以把这两个文件拿出来，单独发布出去，减小包的体积。

3.需要发布哪些文件

• 首先，npm发布时，有默认发布的文件：package.json，README，LICENSE / LICENCE等。
• 其次，最基本的就是lib文件了。可以在package.json文件中的files字段进行配置。
  这里是我的配置：
  
• 最后，根据你个人需要，可以再添加发布文件。

4.发布前注意事项

发布前需要修改package.json中的部分字段：

• private:false。这里必须是false。我们发布的是公共包体。
• “main”: “lib/image-ipreview.umd.min.js”。这是人家下载安装你发布后的插件包引的入口文件。
• “keywords”: [
  “image”,
  “vue”,
  “components”,
  “photo-preview”,
  “preview”,
  “图片预览”
  ]。这里写入关键词，方便其他开发者搜索到。
• 插件是基于vue的，所以，其他开发者dependencies字段中必有vue。但当我们发布插件时，最好将dependencies改为peerDependencies，下面这样：
  
  表明会从开发者的其他的包中引入相对应的包，而不会在这个包里直接引入。

最重要的是要修改npm源为官方源（tip：用nrm可以查看和切换当前源），可以在.npmrc文件中配置。

5.发布

终于到了最后发布时候。
首先，你需要有npm账号。终端输入npm login，登录成功后，执行npm publish --access public。发布成功后，你会收到npm发来的邮件。

6.问题及解决方案

（1）如果遇到如下问题：

修改下包名（即：package.json的name字段），并且，保证该包名在npm中唯一。方法就是在npm官方网站中输入你的包名查看。

（2） 我遇到的另一个问题是，配置文件引入的别名。
根据vue-cli官方文档，config对象上有了一些初始配置，一开始，我是直接将config.resolve.alias重写了，即直接给它赋值个自定义对象配置，结果报了一个没找到~entry的错误，然后，我打印了下config.resolve.alias，发现它上面有这个特殊的配置。是我将它修改没了。所以，有了下面的写法。

（3）另一个可能的问题是package.json中字段的问题。

去掉package.json中的

"browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11"
  ]
}

或者写在.browserlistrc文件中。

7.后续发布

后面插件版本迭代发布时，需要修改package.json中的version字段，然后，执行打包命令，在npm publish即可。

8.最后

好了，以上就是我的npm发布经历。如有不足，欢迎大家指正。