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并在注冊表中找到它。