如何搭建和发布一个 Vue 组件库

我会带着你远行 2022-10-22 10:56 221阅读 0赞

如今，许多组件库风靡一时，使得我们能够便捷地保持一个应用一致的外观和体验。

我至今已经使用过许多不同的组件库，不过使用组件和深入了解构建组件的过程还是有很大不同的。

我想要更深入地理解组件库的构建过程，也希望能有助于你对于这一过程的理解。

我们接下来会使用  `vue-sfc-rollup`  这个 npm 包来构建这个组件库，这是一个非常实用的组件库构建工具。

如果想用这个工具管理现有的组件库，可以查看文档。

这个工具为我们创建了项目的文件结构，如文档所说，它创建了以下文件（SFC 即 Single File Component）：

*  一个最简的  rollup  配置文件
 *  一个包含 build/dev 脚本和项目依赖的 package.json 文件
 *  一个最简的用于转译的 babel.config.js 和 .browserslistrc 文件
 *  rollup 打包 SFC 时用到的包装器（wrapper）
 *  一个 SFC 示例文件
 *  组件库的使用示例

这个工具同时支持单文件组件和组件库，注意文档中的这句话：

> 在 library 模式下有一个 'index' 文件，其中声明了需要暴露哪些组件到你的库中。

也就是说，在设置过程中会额外生成一些文件。

# 开始构建 #

首先，全局安装  `vue-sfc-rollup`：

npm install -g vue-sfc-rollup

安装完成后，在命令行窗口进入想要在其中保存项目文件的目录，执行如下命令来初始化项目。

sfc-init

在提示中选择如下选项：

*  **Is this a single component or a library?**  Library
 *  **What is the npm name of your library?**  （名称在 npm 中必须是唯一的，这里我使用的是  *brian-component-lib*）
 *  **Will this library be written in JavaScript or TypeScript?**  JavaScript（可以放心地选择 TypeScript，只要你清楚自己的选择）
 *  **Enter a location to save the library files:**  （项目的文件夹名称，默认为之前步骤设置的 npm 名称，所以可以直接按 enter 取默认值。）

设置完成之后，进入项目目录并执行 npm install。

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

完成之后，选择一个编辑器来打开项目目录。

如上所述，在  `/src/lib-components`  文件夹中可以看到，一个示例 Vue 组件已经为我们构建好了。要查看效果，可以运行  `npm run serve`  命令，然后在浏览器中访问  http://localhost:8080/。

开始添加我们的自定义组件。在这个示例中，我打算模拟 freeCodeCamp 的任务介绍部分的按钮，所以在  `lib-components`  文件夹中新建一个名为  `FccButton.vue`  的 Vue 文件。

![2ed52f8c013aee31364181e445e99e37.png][]

这就是我们将要构建的按钮

可以直接将下面这段代码复制到你的文件中：

<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

可以看到，在代码段的最上方部分是页面元素的模板：一个按钮，其 class 为 "btn-cta"，其文本内容为我们传递给它的变量 text 的值。

在 script 标签中，定义了组件名称及组件将要接收的属性（props），这个示例组件只接收一个默认值为 "Run the Tests" 的名为  `text`  的属性。

我们还定义了一些样式，以使这个按钮呈现出我们想要的外观。

为了查看这个组件的效果，需要将它添加到  `lib-components`  路径下的  `index.js`  文件中。index.js 文件内容如下：

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

src/lib-components/index.js

还需要在  `dev`  路径下的  `serve.vue`  文件中导入这个组件，代码如下：

/dev/serve.vue

再次执行  `npm run serve`  命令，在浏览器中访问  http://localhost:8080/  地址即可查看这个按钮组件的最终效果。

现在已经构建出我们想要的组件。之后可以参照这些步骤来构建自己的组件，切记要在  `/lib-components/index.js`  文件中将其导出，以确保在我们后续发布的 npm 包中这些组件是可用的。

# 发布到 NPM #

现在，组件库发布前的准备工作已经完成，我们需要执行构建过程来将其打包。

由于这是我们组件库的第一次发布，建议在执行 build 命令之前在  `package.json`  文件中将版本号设置为  `0.0.1`。我们将会在发布第一个正式版本之前加入更多组件。想要了解更多关于语义化版本的信息，查看这里。

执行  `npm run build`。

如文档所述：

> 执行 build 脚本将会在  `dist`  路径中生成 3 个编译后的文件，文件名和路径由 package.json 文件中的  `main`、`module`、`unpkg`  属性指定。这些文件生成之后，可以进行下一步。

命令执行完毕之后，我们已经准备好将组件库发布到 NPM 了。在此之前，确保你有一个 NPM 账号（没有的话，可以点击这里进行注册）。

接下来将你的 NPM 账户添加到终端（terminal）：

npm adduser

### 理解 package.json ###

我们使用 package.json 文件来控制要将哪些文件发布到 npm。初始化项目时生成的  `package.json`  文件内容如下：

"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`  文件夹中所有内容及  `src`  文件夹下所有  `.vue`  文件发布。你可以根据需要更新配置，在本次教程中我们让它保持原样即可。

由于我们没有更改 package.json 的内容，现在可以直接发布了。只需执行如下命令：

npm publish

恭喜！你已经成功发布了一个 Vue 组件库，可以访问  npmjs.com  查看。

--------------------

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

作者：Brian Barrow

译者：Humilitas

**![38bb313712ac9fc16333f0302895122f.png][]**

非营利组织 freeCodeCamp.org 自 2014 年成立以来，以“帮助人们免费学习编程”为使命，创建了大量免费的编程教程，包括交互式课程、视频课程、文章等。我们正在帮助全球数百万人学习编程，希望让世界上每个人都有机会获得免费的优质的编程教育资源，成为开发者或者运用编程去解决问题。

**你也想成为**

**freeCodeCamp 社区的贡献者吗**

**欢迎点击以下文章了解**

✨✨

[招募丨freeCodeCamp 翻译计划][freeCodeCamp]

[成为 freeCodeCamp 专栏作者，与世界各地的开发者分享技术知识][freeCodeCamp 1]

[2ed52f8c013aee31364181e445e99e37.png]: /images/20221022/8a447c64b9c04e3e9f7f567fdfb5c448.png
[38bb313712ac9fc16333f0302895122f.png]: /images/20221022/e596383ab6c14db69bc407ee087d5170.png
[freeCodeCamp]: http://mp.weixin.qq.com/s?__biz=MzU2MzY3NTM1Nw%3D%3D&chksm=fc57e6edcb206ffbe3f017cf3f7734b3f3488f26d483ad0d7c9637527dcff6f78f353913be08&idx=3&mid=2247487327&scene=21&sn=ae66169a0646d8457cb448c3c4a476ad#wechat_redirect
[freeCodeCamp 1]: http://mp.weixin.qq.com/s?__biz=MzU2MzY3NTM1Nw%3D%3D&chksm=fc57fb8fcb207299f5773cb959fc4bb5df4e784b8afc2dd36243f1e1c19d08cb057b949d1bc6&idx=1&mid=2247488061&scene=21&sn=55ce49451ed3bcadbba1373c315e497e#wechat_redirect