vue 组件库发布

Component libraries are all the rage these days. They make it easy to maintain a consistent look and feel across an application.

如今，组件库风行一时。它们使在整个应用程序中保持一致的外观和感觉变得容易。

I've used a variety of different libraries in my career so far, but using a library is very different than knowing exactly what goes into making one.

到目前为止，我在职业生涯中使用过各种不同的库，但是使用库与确切地了解制作一个库的方式有很大不同。

I wanted a more in depth understanding of how a component library is built, and I want to show you how you can get a better understanding too.

我想对组件库的构建方式有更深入的了解，并且想向您展示如何更好地理解组件库。

To create this component library, we're going to use the vue-sfc-rollup npm package. This package is a very useful utility when starting a component library.

要创建此组件库，我们将使用vue-sfc-rollup npm软件包。启动组件库时，此软件包是一个非常有用的实用程序。

If you have an existing library that you want to use the utility with, refer to the documentation they provide.

如果您有要使用该实用程序的现有库，请参考它们提供的文档。

This package creates a set of files for the project to start out. As their documentation explains, the files it creates includes the following (SFC stands for Single File Component):

该软件包为项目创建了一组文件。正如他们的文档所解释的那样，它创建的文件包括以下内容(SFC代表“单个文件组件”)：

a minimal rollup config
最小汇总配置
a corresponding package.json file with build/dev scripts and dependencies
带有build / dev脚本和依赖项的相应package.json文件
a minimal babel.config.js and .browserslistrc file for transpiling
最小的babel.config.js和.browserslistrc文件用于转译
a wrapper used by rollup when packaging your SFC
打包SFC时汇总使用的包装器
a sample SFC to kick-start development
样本SFC以启动开发
a sample usage file which can be used to load/test your component/library during development
一个样本用法文件，可用于在开发过程中加载/测试您的组件/库

The utility supports both Single File Components as well as a library of components. It is important to note this sentence from the documentation:

该实用程序支持“单个文件组件”以及组件库。请务必注意文档中的这一句话：

In library mode, there is also an 'index' which declares the components exposed as part of your library.

在库模式下，还有一个“索引”，用于声明作为库的一部分公开的组件。

All this means is that there is some extra files generated in the setup process.

这意味着在安装过程中还会生成一些额外的文件。

酷，让我们建立图书馆 (Cool, let's build the library )

First you'll want to install the vue-sfc-rollup globally:

首先，您需要全局安装vue-sfc-rollup ：

npm install -g vue-sfc-rollup

Once that is installed globally, from the command line, go into the directory where you want your library project to be located. Once you are in that folder, run the following command to initialize the project.

将其全局安装后，从命令行进入要在其中放置库项目的目录。进入该文件夹后，运行以下命令来初始化项目。

sfc-init

Choose the following options within the prompts:

在提示中选择以下选项：

Is this a single component or a library? Library
这是单个组件还是库？ 图书馆
What is the npm name of your library? (this will need to be unique on npm. I used brian-component-lib)
您的图书馆的npm名称是什么？ (这在npm上必须是唯一的。我使用brian-component-lib )
Will this library be written in JavaScript or TypeScript? JavaScript (feel free to use TypeScript if you know what you're doing)
该库将用JavaScript或TypeScript编写吗？ JavaScript(如果您知道自己在做什么，则可以随意使用TypeScript)
Enter a location to save the library files: This is the folder name you want your library to have. It will default to the npm name you gave it above so you can just hit enter.
输入保存库文件的位置：这是您希望库具有的文件夹名称。它将默认为您在上面提供的npm名称，因此您只需按Enter键即可。

After the setup is complete, navigate to your folder and run an npm install.

设置完成后，导航至您的文件夹并运行npm安装。

cd path/to/my-component-or-libnpm install

Once that is done, you can open the folder up in your editor of choice.

完成后，您可以在选择的编辑器中打开该文件夹。

As stated above, there is a sample Vue component built for us. You can find it inside of the /src/lib-components folder. To see what this component looks like, you can run npm run serve and navigate to http://localhost:8080/

如上所述，为我们构建了一个示例Vue组件。您可以在/src/lib-components文件夹中找到它。要查看此组件的外观，可以运行npm run serve并导航至http：// localhost：8080 /

Now let's add our own custom component. Create a new Vue file inside of the lib-components folder. For this example, I am going to imitate the button used in the freeCodeCamp assignment sections, so I'll name it FccButton.vue

现在，让我们添加自己的自定义组件。在lib-components文件夹内创建一个新的Vue文件。对于此示例，我将模仿freeCodeCamp分配部分中使用的按钮，因此将其命名为FccButton.vue

You can copy and paste this code into your file:

您可以将此代码复制并粘贴到文件中：

You can see we have the basic template section at the top with the class we want it to have. It also uses the text that the user will pass in.

您可以看到我们的顶部有基本模板部分，以及我们想要的类。它还使用用户将传递的文本。

Inside the script tag we have the Component name and the props that the component will take in. In this case there is only one prop called text that has a default of "Run the Tests".

在脚本标签内，我们具有组件名称和该组件将要使用的属性。在这种情况下，只有一个名为text属性，其默认值为“运行测试”。

We also have some styling to give it the look we want it to have.

我们也有一些样式来赋予它我们想要的外观。

To see how the component looks, we'll need to add it to the index.js file located in the lib-components folder. Your index.js file should look like this:

要查看组件的外观，我们需要将其添加到lib-components文件夹中的index.js文件中。您的index.js文件应如下所示：

You'll also need to import the component into the serve.vue file inside of the dev folder to look like this:

您还需要将组件导入dev文件夹内的serve.vue文件，如下所示：

You might need to run npm run serve again to be able to see the button, but it should be visible when you navigate to http://localhost:8080/ in your browser.

您可能需要再次运行npm run serve才能看到该按钮，但是当您在浏览器中导航到http：// localhost：8080 /时，该按钮应该可见。

So, we've built the component we wanted. You will follow this same process for any other component you want to build. Just make sure you are exporting them in the /lib-components/index.js file in order to make them available from the npm package we are about to publish.

因此，我们已经构建了所需的组件。对于要构建的任何其他组件，您将遵循相同的过程。只需确保将其导出到/lib-components/index.js文件中，以使它们在我们即将发布的npm包中可用即可。

发布到NPM (Publishing to NPM)

Now that we're ready to publish the library to NPM, we need to go through the build process for it to be packaged up and ready to go.

现在我们准备将库发布到NPM，我们需要完成构建过程以将其打包并准备就绪。

Before we run the build command, I recommend changing the version number in the package.json file to be 0.0.1 since this is the very first publish event for our library. We will want more than just one component in the library before we release the official 'first' version. You can read more about semantic versioning here.

在运行build命令之前，我建议将package.json文件中的版本号更改为0.0.1因为这是我们库的第一个发布事件。在发布正式的“第一个”版本之前，我们将需要库中不止一个组件。您可以在此处阅读有关语义版本控制的更多信息。

To do this, we run npm run build.

为此，我们运行npm run build 。

As the documentation states:

如文档所述：

Running the build script results in 3 compiled files in the dist directory, one for each of the main, module, and unpkg properties listed in your package.json file. With these files are generated, you're ready to go!
运行构建脚本会在dist目录中生成3个编译文件，每个package.json文件中列出的main ， module和unpkg属性一个。生成这些文件后，就可以开始了！

With this command run, we are ready to publish to NPM. Before we do that, make sure you have an account on NPM (which you can do here if you need to).

运行此命令后，我们准备发布到NPM。在执行此操作之前，请确保您已经在NPM上拥有一个帐户(如果需要，可以在此处进行操作)。

Next we'll need to add your account to your terminal by running:

接下来，我们需要通过运行以下命令将您的帐户添加到您的终端：

npm adduser

了解package.json (Understanding package.json)

When we publish to npm, we use the package.json file to control what files are published. If you look at the package.json file that was created when we initially set up the project you'll see something like this:

当发布到npm时，我们使用package.json文件来控制发布哪些文件。如果您查看在最初设置项目时创建的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"
],

The section under files tells npm to publish everything in our dist folder as well as any .vue files inside of our src folder. You can update this as you see fit, but we'll be leaving it as is for this tutorial.

files下的部分告诉npm发布dist文件夹中的所有内容以及src文件夹中的任何.vue文件。您可以根据自己的需要进行更新，但我们将保留本教程的内容。

Because we aren't changing anything with the package.json file, we are ready to publish. To do that we just need to run the following command:

因为我们没有使用package.json文件进行任何更改，所以我们准备发布了。为此，我们只需要运行以下命令：

npm publish

And that is it! Congratulations! You've now published a Vue component library. You can go to npmjs.com and find it in the registry.

就是这样！恭喜你！您现在已经发布了Vue组件库。您可以转到npmjs.com并在注册表中找到它。