从零开始在NPM上发布一个Vue组件

TL;DR 本文细致讲解了在NPM上发布一个Vue组件的全过程，包括建立项目、编写组件、打包和发布四个环节。

建立项目

这里咱们直接利用@vue/cli来生成项目。若是没有安装@vue/cli的话，能够使用如下方法进行安装：

# 若是喜欢npm
npm i -g @vue/cli

# 若是喜欢yarn
yarn global add @vue/cli
复制代码

此外，若是安装了npx（高版本的nodejs发行版会自带这一工具）的话，还能够很方便地经过npx vue这一方式实现免安装使用。

接下来就能够建立项目了，这里咱们建立一个my-banner项目，里面将会包含一个Banner组件：

vue create my-banner
复制代码

@vue/cli会提示你选择一个预置（preset）的配置，这里咱们直接选择“default”（babel, eslint）就能够，以后@vue/cli会自动调用yarn或npm来进行依赖的下载。下载完成后就能够进入项目目录了：

cd my-banner
复制代码

此时的目录结构为：

├── README.md
├── babel.config.js
├── node_modules
├── package.json
├── public
@ ├── favicon.ico
@ └── index.html
├── src
@ ├── App.vue
@ ├── assets
@ ├── components
@ └── main.js
└── yarn.lock

下面启动开发环境本地服务器：

yarn serve
复制代码

打开localhost:8080，就能够看到默认的首页：

编写组件

咱们如今开始编写一个很是简单的Banner组件。

<!-- src/components/Banner.vue -->

<template>
  <div class="banner" :style="bannerStyles" :class="`banner__${position}`">
    <slot></slot>
  </div>
</template>
<script>
const defaultStyles = {
  left: 0,
  right: 0,
};
export default {
  props: {
    position: {
      type: String,
      default: 'top',
      validator(position) {
        return ['top', 'bottom'].indexOf(position) > -1;
      },
    },
    styles: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      bannerStyles: {
        ...defaultStyles,
        ...this.styles,
      },
    };
  },
};
</script>
<style lang="scss" scoped>
.banner {
  padding: 12px;
  background-color: #fcf6cd;
  color: #f6a623;
  text-align: left;
  position: fixed;
  z-index: 2;
}
.banner__top {
  top: 0;
}
.banner__bottom {
  bottom: 0;
}
</style>
复制代码

咱们将Banner.vue置于src/components目录下，同时在该目录下新建一个index.js文件，用来注册Vue组件。

// src/components/index.js

import Vue from "vue";
import Banner from "./Banner.vue";

const Components = {
    Banner
};

Object.keys(Components).forEach(name => {
    Vue.component(name, Components[name]);
});

export default Components;
复制代码

接下来咱们修改一下@vue/cli自动生成的src/components/HelloWorld.vue文件，引用一下咱们刚刚编写的Banner组件：

<!-- src/components/HelloWorld.vue -->

<template>
  <div class="hello">
    <!-- 下面插入了咱们刚刚编写的Banner组件 -->
    <Banner>This is a banner!</Banner>
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <!-- 省略部份内容 -->
  </div>
</template>

<script>
    <!-- 省略有关内容 -->
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    <!-- 省略有关内容 -->
</style>
复制代码

修改一下项目的主入口main.js

// src/main.js

import Vue from 'vue';
import App from './App.vue';

// 引用咱们的自定义组件
import "./components";

Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
}).$mount('#app');
复制代码

由于前面定义style时使用了scss，因此还须要安装两个开发环境依赖项

yarn add sass-loader node-sass -D
复制代码

最后执行

yarn serve
复制代码

就能够在localhost:8080看到效果了：

能够看到，咱们编写的Banner组件已经成功在页面上渲染出来了。

打包

接下来，咱们须要对这个组件进行打包。这里咱们能够使用@vue/cli 3.0自带的打包功能。打开package.json文件，在scripts中增长一项：

{
  "scripts": {
      "package": "vue-cli-service build --target lib --name my-banner ./src/components/index.js"
  }
}
复制代码

而后执行yarn package，会在dist目录下生成下列文件：

├── demo.html
├── my-banner.common.js
├── my-banner.common.js.map
├── my-banner.css
├── my-banner.umd.js
├── my-banner.umd.js.map
├── my-banner.umd.min.js
└── my-banner.umd.min.js.map

接下来，须要将package.json中的main字段指向刚刚生成的库文件。这里以commonjs为例（umd应该也是没问题的）：

{
  "main": "./dist/my-banner.common.js"
}
复制代码

而后，咱们须要在package.json的files字段中声明这个组件库项目须要包含的文件：

{
  "files": [
    "dist/*",
    "src/*",
    "public/*",
    "*.json",
    "*.js"
  ]
}
复制代码

这样就能够打包阶段就算是完成了。

发布

注册NPM帐号并建立组织

首先登录NPM官网

注册帐号，都是常规操做，须要填写的有全名、邮箱、用户名和密码。以后邮箱会收到确认邮件，标题为“Verify your npm email address”，发件人是“npm, Inc.”，点击邮件中的连接就能够激活帐户了。

登陆帐号，点击右上角的头像，选择“Create an Organization”，就能够建立你本身的组织了。

组织有两种选项，支持私有发布的须要缴纳每个月7刀的“管理费”，而咱们如今只须要发布一个公共的包，那就能够选择免费版本。

本地命令行登录npm

npm login
复制代码

以后按提示输入用户名和密码便可。

能够使用

npm whoami
复制代码

来检查登录是否成功。若是成功的话，这条命令会返回你的用户名。

给你的组件库命名

你须要给你的这个组件库起一个名字，这里用到的是package.json中的name字段。注意@后的名称就填写你刚刚建立的组织的名称。

{
  "name": "@abc/my-banner"
}
复制代码

最终步骤：再次构建与发布

最后，使用yarn package从新构建一遍这个组件库，而后使用：

npm publish --access public
复制代码

来发布这个组件库。

注意这里可能会报下面的错误 npm ERR! This package has been marked as private npm ERR! Remove the 'private' field from the package.json to publish it. 解决办法很简单，按照提示删除package.json中的private字段，或将其设置为false均可以。

成果

顺利发布后，就能够在你的组织页面看到刚刚发布的这个包了。

在此以后，你能够新建一个项目，而后

yarn add @abc/my-banner 
复制代码

来把你刚刚发布的这个包添加为依赖项。因为咱们以前已经在src/components/index.js中对组件进行了全局注册，因此你如今能够直接在template中调用<Banner>。

总结

以上，咱们就从零开始实现了一个Vue组件在npm上发布的流程，是否是很简单呢？那么，如今就开始发布一个你本身的组件吧！

---

参考文章

How to create and publish your own VueJS Component library on NPM using @vue/cli 3.0