打包发布你的vue组件到npm vue.jsnpm组件封装

如果在你的工作中用到了vue，那么你可能会发现同一个组件经常在你的应用中会被重复的使用。也许你写了一个非常有价值的组件，想要和别人分享，那么把它打包发布到npm是一个不错的选择。

本文将以一个音乐播放器为例，一步步介绍如何分装组件、打包、发布。那么让我们开始吧！

安装vue-cli 使用下面命令安装vue-cli，如果你已安装可以跳过这一步

npm install -g @vue/cli # OR yarn global add @vue/cli

如果你不确定是否安装过，可以使用下面的命令检查一下：

vue --version @vue/cli 4.5.15

出现版本号，则表明你已经成功安装。
创建一个项目运行以下命令来创建一个新项目：

vue create leo-player

执行命令后会有一些选项，可以参考这里选择，直到项目目录生成。
在你的IDE中打开项目，是下面的样子，除去红框里的两个文件。红框的两个文件是发布npm package需要用到的。

文章图片

当然你可以把public和src下的assets、components 目录和 main.js 都删除，因为发布组件不需要它们。不过暂时留着可以方便你测试自己组件是不是你预期的样子。
【打包发布你的vue组件到npm】先看下LeoPlayer.vue

...

就是标准的vue模板文件，细节省略不再赘述。
配置vue插件的入口文件首先我们要给我们的插件指定入口，方便别人在他们的项目中安装使用。
VueJS 插件的安装一般是用 Vue.use() 方法，所以我们指定的入口文件需要包含一个 install 方法，如下：

// install.js import LeoPlayer from "./LeoPlayer"; export default { install: (Vue) => { Vue.component("leo-player", LeoPlayer) } }

配置 Package.json 我们需要在 Package.json 文件中做一系列配置，来支持后续的打包发布，按下面的步骤进行：
scripts
vue-cli-service build --target lib --name myLib [entry]
在 package.json 的 scripts 中添加 build-library，对照上面的命令
myLib 是你发布的package的名称。

"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "build-library" : "vue-cli-service build --target lib --name leo-player ./src/install.js", "lint": "vue-cli-service lint" },

在你的终端执行，npm run build-library，得到下面编译后的目录文件：

文章图片

main
接下来需要在package.json中配置main，注意它指定的文件要和我们打包生成的文件一致，我习惯使用commonjs后缀的文件:

"main" : ".dist/leo-player.common.js",

files
package.json 中的files属性决定了哪些文件会被发布到NPM，如果没有指定，它会根据你的.gitignore文件做判断。我们一般情况只需要把打包编译好的目录发布到NPM，指定files属性如下：

"files": ["dist/*"],

事实证明只发布dist目录到NPM是正确的方式，因为编译好的dist是经过编译优化的更加适用于生产环境，而项目中的src文件更适合存放在GitHub托管。
不过如果你仍然希望把一些其他的文件也发布到NPM也是可以的，只要如下配置：

"files": [ "dist/*", "src/*", "public/*", "*.json", "*.js" ],

package.json 最终参考

{ "name": "leo-player", "version": "0.1.0", "private": false, "author": { "name": "Leo", "email": "asdfpeng@qq.com" }, "repository": "https://github.com/iicoom/leo-player.git", "bugs": "https://github.com/iicoom/leo-player/issues", "keywords": ["audio", "music player", "vue"], "license": "MIT", "files": ["dist/*"], "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "build-library": "vue-cli-service build --target lib --name leo-player ./src/install.js" }, "main": "dist/leo-player.common.js", "dependencies": { "core-js": "^3.6.5", "vue": "^2.6.11" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.15", "@vue/cli-plugin-eslint": "~4.5.15", "@vue/cli-service": "~4.5.15", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", "vue-template-compiler": "^2.6.11" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "babel-eslint" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }

注意 "private": false, 这个需要设置为false，因为私有的是不能发布的。
更新 README.md
添加适当的安装说明到README.md文件，这样使用你插件的人才不至于骂你！！！README.md的内容会展示在NPM官网的页面中。
比较和的书写模板如下：

你的插件解决了什么问题？
如何安装它？
如何使用它？
一些使用的例子
别人如何贡献代码
用到了什么技术？

具体文件可以参考一下这里
发布到NPM 首先你需要有一个NPM官网的账号，没有的话需要去先注册。有了继续向下，在你的项目终端登录：

?listener git:(master) ? npm login npm notice Log in on https://registry.npmjs.org/ Username: leozbc-- Password: Email: (this IS public) asdfpeng@qq.com npm notice Please check your email for a one-time password (OTP) Enter one-time password: xxxxLogged in as leozbc-- on https://registry.npmjs.org/.

输入完邮箱，npm官方会给你的邮箱发送一个一次性密码，输入密码登录，直到最后一行的提示，登录成功。
重新打包
因为上边我们更新了一些文件，现在需要重新打包：

npm run build-librarynpm publish

如果出现了下面的提示，不要慌

npm ERR! code E403 npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/leo-player - You do not have permission to publish "leo-player". Are you logged in as the correct user?

表示包leo-player已经在包管理器已经存在被别人用了，需要修改包名称。

?leo-player git:(master) ? npm publish npm notice npm noticeleo-player@1.0.0 npm notice === Tarball Contents === npm notice 2.6kB .idea/workspace.xml npm notice 50BREADME.md npm notice 2.0kB index.js npm notice 553Bpackage.json npm notice === Tarball Details === npm notice name:leo-player npm notice version:1.0.0 npm notice filename:leo-player-1.0.0.tgz npm notice package size:2.2 kB npm notice unpacked size: 5.2 kB npm notice shasum:11d30e33c7aaee14523e47b8267a7bce9a5c0e56 npm notice integrity:sha512-lInf0FxXXHwcy[...]/zh6EJ5qz+CDw== npm notice total files:4 npm notice npm notice Publishing to https://registry.npmjs.org/ + leo-player@1.0.0

至此，发布自己的package到NPM已经大功告成了,然后别人就可以通过npm install leo-player 来安装你的包了。