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

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

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

应用上面命令装置 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 都删除，因为公布组件不须要它们。不过临时留着能够不便你测试本人组件是不是你预期的样子。

先看下 LeoPlayer.vue

<template>
  <div class="leo_drawer">
    ...
  </div>
</template>

<script>
...
</script>

<style scoped>
...
</style>

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

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

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

// install.js
import LeoPlayer from "./LeoPlayer";

export default {install: (Vue) => {Vue.component("leo-player", LeoPlayer)
    }
}

咱们须要在 Package.json 文件中做一系列配置，来反对后续的打包公布，按上面的步骤进行：

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，失去上面编译后的目录文件：

接下来须要在 package.json 中配置 main，留神它指定的文件要和咱们打包生成的文件统一，我习惯应用 commonjs 后缀的文件:

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

package.json 中的 files 属性决定了哪些文件会被公布到 NPM，如果没有指定，它会依据你的.gitignore 文件做判断。咱们个别状况只须要把打包编译好的目录公布到 NPM，指定 files 属性如下：

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

事实证明只公布 dist 目录到 NPM 是正确的形式，因为编译好的 dist 是通过编译优化的更加实用于生产环境，而我的项目中的 src 文件更适宜寄存在 GitHub 托管。

不过如果你依然心愿把一些其余的文件也公布到 NPM 也是能够的，只有如下配置：

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

{
  "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 的内容会展现在 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: xxxx

Logged in as leozbc-- on https://registry.npmjs.org/.

输出完邮箱，npm 官网会给你的邮箱发送一个一次性明码，输出明码登录，直到最初一行的提醒，登录胜利。

因为上边咱们更新了一些文件，当初须要从新打包：

npm run build-library

npm 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 notice 📦  leo-player@1.0.0
npm notice === Tarball Contents ===
npm notice 2.6kB .idea/workspace.xml
npm notice 50B   README.md
npm notice 2.0kB index.js
npm notice 553B  package.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 来装置你的包了。

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

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

装置 vue-cli

创立一个我的项目

配置 vue 插件的入口文件

配置 Package.json

scripts

main

files

package.json 最终参考

更新 README.md

公布到 NPM

从新打包