從零開始在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