如今，許多組件庫(kù)風(fēng)靡一時(shí)，使得我們能夠便捷地保持一個(gè)應(yīng)用一致的外觀和體驗(yàn)。

我至今已經(jīng)使用過(guò)許多不同的組件庫(kù)，不過(guò)使用組件和深入了解構(gòu)建組件的過(guò)程還是有很大不同的。

我想要更深入地理解組件庫(kù)的構(gòu)建過(guò)程，也希望能有助于你對(duì)于這一過(guò)程的理解。

我們接下來(lái)會(huì)使用  vue-sfc-rollup  這個(gè) npm 包來(lái)構(gòu)建這個(gè)組件庫(kù)，這是一個(gè)非常實(shí)用的組件庫(kù)構(gòu)建工具。

如果想用這個(gè)工具管理現(xiàn)有的組件庫(kù)，可以查看文檔。

這個(gè)工具為我們創(chuàng)建了項(xiàng)目的文件結(jié)構(gòu)，如文檔所說(shuō)，它創(chuàng)建了以下文件（SFC 即 Single File Component）：

• 一個(gè)最簡(jiǎn)的  rollup  配置文件
• 一個(gè)包含 build/dev 腳本和項(xiàng)目依賴的 package.json 文件
• 一個(gè)最簡(jiǎn)的用于轉(zhuǎn)譯的 babel.config.js 和 .browserslistrc 文件
• rollup 打包 SFC 時(shí)用到的包裝器（wrapper）
• 一個(gè) SFC 示例文件
• 組件庫(kù)的使用示例

這個(gè)工具同時(shí)支持單文件組件和組件庫(kù)，注意文檔中的這句話：

在 library 模式下有一個(gè) 'index' 文件，其中聲明了需要暴露哪些組件到你的庫(kù)中。

也就是說(shuō)，在設(shè)置過(guò)程中會(huì)額外生成一些文件。

開(kāi)始構(gòu)建

首先，全局安裝  vue-sfc-rollup：

npm install -g vue-sfc-rollup

安裝完成后，在命令行窗口進(jìn)入想要在其中保存項(xiàng)目文件的目錄，執(zhí)行如下命令來(lái)初始化項(xiàng)目。

sfc-init

在提示中選擇如下選項(xiàng)：

• Is this a single component or a library?  Library
• What is the npm name of your library?  （名稱(chēng)在 npm 中必須是唯一的，這里我使用的是  brian-component-lib）
• Will this library be written in JavaScript or TypeScript?  JavaScript（可以放心地選擇 TypeScript，只要你清楚自己的選擇）
• Enter a location to save the library files:  （項(xiàng)目的文件夾名稱(chēng)，默認(rèn)為之前步驟設(shè)置的 npm 名稱(chēng)，所以可以直接按 enter 取默認(rèn)值。）

設(shè)置完成之后，進(jìn)入項(xiàng)目目錄并執(zhí)行 npm install。

cd path/to/my-component-or-lib

npm install

完成之后，選擇一個(gè)編輯器來(lái)打開(kāi)項(xiàng)目目錄。

如上所述，在  /src/lib-components  文件夾中可以看到，一個(gè)示例 Vue 組件已經(jīng)為我們構(gòu)建好了。要查看效果，可以運(yùn)行  npm run serve  命令，然后在瀏覽器中訪問(wèn)  http://localhost:8080/。

開(kāi)始添加我們的自定義組件。在這個(gè)示例中，我打算模擬 freeCodeCamp 的任務(wù)介紹部分的按鈕，所以在  lib-components  文件夾中新建一個(gè)名為  FccButton.vue  的 Vue 文件。

這就是我們將要構(gòu)建的按鈕

可以直接將下面這段代碼復(fù)制到你的文件中：

<template>
  <button class="btn-cta">{{ text }}</button>
</template>

<script>
export default {
  name: "FccButton", // vue component name
  props: {
    text: {
      type: String,
      default: "Enter Button Text Here"
    }
  },
  data() {}
};
</script>

<style>
.btn-cta {
  background-color: #d0d0d5;
  border-width: 3px;
  border-color: #1b1b32;
  border-radius: 0;
  border-style: solid;
  color: #1b1b32;
  display: block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 18px;
  line-height: 1.42857143;
}

.btn-cta:active:hover,
.btn-cta:focus,
.btn-cta:hover {
  background-color: #1b1b32;
  border-width: 3px;
  border-color: #000;
  background-image: none;
  color: #f5f6f7;
}
</style>

src/lib-components/FccButton.vue

可以看到，在代碼段的最上方部分是頁(yè)面元素的模板：一個(gè)按鈕，其 class 為 "btn-cta"，其文本內(nèi)容為我們傳遞給它的變量 text 的值。

在 script 標(biāo)簽中，定義了組件名稱(chēng)及組件將要接收的屬性（props），這個(gè)示例組件只接收一個(gè)默認(rèn)值為 "Run the Tests" 的名為  text  的屬性。

我們還定義了一些樣式，以使這個(gè)按鈕呈現(xiàn)出我們想要的外觀。

為了查看這個(gè)組件的效果，需要將它添加到  lib-components  路徑下的  index.js  文件中。index.js 文件內(nèi)容如下：

/* eslint-disable import/prefer-default-export */
export { default as FccButton } from './FccButton';

src/lib-components/index.js

還需要在  dev  路徑下的  serve.vue  文件中導(dǎo)入這個(gè)組件，代碼如下：

<script>
import Vue from "vue";
import { FccButton } from "@/entry";

export default Vue.extend({
  name: "ServeDev",
  components: {
    FccButton
  }
});
</script>

<template>
  <div id="app">
    <FccButton />
  </div>
</template>

/dev/serve.vue

再次執(zhí)行  npm run serve  命令，在瀏覽器中訪問(wèn)  http://localhost:8080/  地址即可查看這個(gè)按鈕組件的最終效果。

現(xiàn)在已經(jīng)構(gòu)建出我們想要的組件。之后可以參照這些步驟來(lái)構(gòu)建自己的組件，切記要在  /lib-components/index.js  文件中將其導(dǎo)出，以確保在我們后續(xù)發(fā)布的 npm 包中這些組件是可用的。

發(fā)布到 NPM

現(xiàn)在，組件庫(kù)發(fā)布前的準(zhǔn)備工作已經(jīng)完成，我們需要執(zhí)行構(gòu)建過(guò)程來(lái)將其打包。

由于這是我們組件庫(kù)的第一次發(fā)布，建議在執(zhí)行 build 命令之前在  package.json  文件中將版本號(hào)設(shè)置為  0.0.1。我們將會(huì)在發(fā)布第一個(gè)正式版本之前加入更多組件。想要了解更多關(guān)于語(yǔ)義化版本的信息，查看這里。

執(zhí)行  npm run build。

如文檔所述：

執(zhí)行 build 腳本將會(huì)在  dist  路徑中生成 3 個(gè)編譯后的文件，文件名和路徑由 package.json 文件中的  main、module、unpkg  屬性指定。這些文件生成之后，可以進(jìn)行下一步。

命令執(zhí)行完畢之后，我們已經(jīng)準(zhǔn)備好將組件庫(kù)發(fā)布到 NPM 了。在此之前，確保你有一個(gè) NPM 賬號(hào)（沒(méi)有的話，可以點(diǎn)擊這里進(jìn)行注冊(cè)）。

接下來(lái)將你的 NPM 賬戶添加到終端（terminal）：

npm adduser

理解 package.json

我們使用 package.json 文件來(lái)控制要將哪些文件發(fā)布到 npm。初始化項(xiàng)目時(shí)生成的  package.json  文件內(nèi)容如下：

"main": "dist/brian-component-lib.ssr.js",
"browser": "dist/brian-component-lib.esm.js",
"module": "dist/brian-component-lib.esm.js",
"unpkg": "dist/brian-component-lib.min.js",
"files": [
    "dist/*",
    "src/**/*.vue"
],

files  屬性中的配置指定 npm 將  dist  文件夾中所有內(nèi)容及  src  文件夾下所有  .vue  文件發(fā)布。你可以根據(jù)需要更新配置，在本次教程中我們讓它保持原樣即可。

由于我們沒(méi)有更改 package.json 的內(nèi)容，現(xiàn)在可以直接發(fā)布了。只需執(zhí)行如下命令：

npm publish

恭喜！你已經(jīng)成功發(fā)布了一個(gè) Vue 組件庫(kù)，可以訪問(wèn)  npmjs.com  查看。

原文：https://www.freecodecamp.org/news/how-to-create-and-publish-a-vue-component-library/

作者：Brian Barrow

譯者：Humilitas