关于vue.js:打包发布你的第一个vue组件到npm

如果在你的工作中用到了vue，那么你可能会发现同一个组件常常在你的利用中会被反复的应用。兴许你写了一个十分有价值的组件，想要和他人分享，那么把它打包公布到npm是一个不错的抉择。

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

装置vue-cli

应用上面命令装置vue-cli，如果你已装置能够跳过这一步

npm install -g @vue/cli# ORyarn global add @vue/cli

如果你不确定是否装置过，能够应用上面的命令检查一下：

vue --version@vue/cli 4.5.15

呈现版本号，则表明你曾经胜利装置。

创立一个我的项目

运行以下命令来创立一个新我的项目：

vue create leo-player

执行命令后会有一些选项，能够参考 这里 抉择，直到我的项目目录生成。

在你的IDE中关上我的项目，是上面的样子，除去红框里的两个文件。红框的两个文件是公布npm package须要用到的。

当然你能够把public和src下的assets、components 目录和 main.js 都删除，因为公布组件不须要它们。不过临时留着能够不便你测试本人组件是不是你预期的样子。

先看下LeoPlayer.vue

<template>  <div class="leo_drawer">    ...  </div></template><script>...</script><style scoped>...</style>

就是规范的vue模板文件，细节省略不再赘述。

配置vue插件的入口文件

首先咱们要给咱们的插件指定入口，不便他人在他们的我的项目中装置应用。

VueJS 插件的装置个别是用 Vue.use() 办法，所以咱们指定的入口文件须要蕴含一个 install 办法，如下：

// install.jsimport 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 loginnpm notice Log in on https://registry.npmjs.org/Username: leozbc--Password:Email: (this IS public) asdfpeng@qq.comnpm 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 E403npm 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 publishnpm noticenpm notice   leo-player@1.0.0npm notice === Tarball Contents ===npm notice 2.6kB .idea/workspace.xmlnpm notice 50B   README.mdnpm notice 2.0kB index.jsnpm notice 553B  package.jsonnpm notice === Tarball Details ===npm notice name:          leo-playernpm notice version:       1.0.0npm notice filename:      leo-player-1.0.0.tgznpm notice package size:  2.2 kBnpm notice unpacked size: 5.2 kBnpm notice shasum:        11d30e33c7aaee14523e47b8267a7bce9a5c0e56npm notice integrity:     sha512-lInf0FxXXHwcy[...]/zh6EJ5qz+CDw==npm notice total files:   4npm noticenpm notice Publishing to https://registry.npmjs.org/+ leo-player@1.0.0

至此，公布本人的package到NPM曾经功败垂成了,而后他人就能够通过npm install leo-player 来装置你的包了。

小伙伴们有什么问题，能够在评论区留言探讨哦