最近心血来潮写了个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发布经历。如有不足,欢迎大家指正。