1
头图
如果在你的工作中用到了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 都删除,因为发布组件不需要它们。不过暂时留着可以方便你测试自己组件是不是你预期的样子。

先看下LeoPlayer.vue

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

<script>
...
</script>

<style scoped>
...
</style>

就是标准的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,得到下面编译后的目录文件:
dist

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: 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 来安装你的包了。

小伙伴们有什么问题,可以在评论区留言讨论哦

原文地址


来了老弟
508 声望31 粉丝

纸上得来终觉浅,绝知此事要躬行