In the previous article, I introduced vite and VUe3.0, but it was too shallow to talk about on paper, so I still need to practice to understand the real content inside

This article explains how to develop component library demo using two of the most popular technologies recently, vue3.0 and vite

Making the address

I believe that the use of VUE students, for VUE-CLI such a set of content is quite familiar, now do not use vuE-CLI, directly through their own manual build a complete component library project

Determine the unique technology selection

We are very clear about this, which is a project based on VUe3.0

In addition to vUE, the selection of TS and JS is also important, at this stage, or in a few years, if you are still not able to use TS development, then it is easy to become the past tense =,=

Also, as far as the component library is concerned, there is no way to determine whether the external business exists in TS or JS when our component is called externally, so your types file is essential anyway

It’s easy to conclude, then, that component libraries, at least at the script level, are typescript

Vue template file in addition to JS template and style, these two considerations are a little indifferent feeling, use any style actually can, I choose SCSS

Development and production environments

After confirming our technology selection, we can start to build the scaffolding for our whole project

First consider the difference between our production and development environments

In order to make the development environment can feel the feeling of opening in seconds, there is no need to compile and wait for a long time before the results can be displayed on the interface, so I use Vite + Webpack in the selection of the development environment

Install WebPack, Vite

npm i webpack webpack-cli vite -D

Vite is a tool for use in the development environment, rather than for production and development of the entire component library, so there is a clear distinction between webPack and Vite specific usage scenarios

  1. For component library packaging, webPack is used
  2. For the component library demo, use Vite for development

The following will only talk about the relevant configuration, and the detailed configuration description will not be described here. If you want to see it, you can view the relevant configuration through the link on Github

Take a look at the renderings after the concrete implementation

Let’s take a look at the previous part of this diagram. It uses watch instead of webpack-dev-server. The reason is that if webpack-dev-server is used, a service is generated by default in the development environment, and this service is not what we need. All we need is the bundle generated after the package is finished, so we just need to make our component library available in the development environment in the form of a production package

The next section refers to the fact that vite starts in the Example folder and is used between projects via NPM link

There is a problem here:

The system of Vite itself will not parse AMD or CMD modular js files, which leads to the files packaged by Webpack cannot be directly used in Vite. In order to solve this problem simply, copy-webpack-plugin is used. Copy the two current SRC components directories directly into the packaged page, and then modify the main field in package.json to point directly to the current lib directory, the packaged directory, instead of pointing directly to the current file. Direct reference to the corresponding path of the file, here is mainly to ensure that there will be no problems in the packaging process, to keep the environment consistent

Install the ts

npm i typescript ts-loader -D

Ts is used in component library programming, so just write the corresponding TS-loader in webpack, there is nothing too fancy about this content, simple and pure

The only thing to note is that the component library still needs to know the current type when making external calls, so declaration and outDir properties are needed when writing tsConfig

{
    "compilerOptions": {
        "checkJs": false."lib": [
            "esnext"."dom"."dom.iterable"."scripthost"]."target": "ES2019"."module": "esnext"."noEmit": false."sourceMap": true."pretty": true."strict": true."jsx": "preserve"."importHelpers": true."moduleResolution": "node"."esModuleInterop": true."declaration": true."outDir": "./lib"."baseUrl": "."."paths": {
            "vue": ["./node_modules/vue"]."@components/*": ["components/*"]}},"exclude": [
       "node_modules"."build"."example"]}Copy the code

Install eslint

npm eslint eslint-loader -D

It’s also a normal way to use ESLint to analyze TS files, in conjunction with Airbnb to check code

First, you need to convert the ESLint parser to be able to parse TS files, depending on @typescript-esLint /parser, and then change the parserOptions.parser in the ESLint configuration to the parser you currently use

npm i @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

module.exports = {
	root: true.parserOptions: {
		parser: '@typescript-eslint/parser'.ecmaVersion: 2020,},env: {
		node: true,},plugins: [
		'@typescript-eslint',].extends: [
		'airbnb-base'.'plugin:@typescript-eslint/recommended'.'plugin:vue/vue3-recommended']};Copy the code

Using @typescript- esLint only includes the contents of ts files, but we are writing a component library for Vue, so we also need to add plugin:vue/vue3-recommended to extends. Since I prefer to configure it myself, So airbnb-base is used instead of the full Airbnb profile written for vUE

Release and Use

Publishing also needs to be managed automatically, since anything that involves manual involvement will always go wrong

Consider the issue that publishing a component library requires several processes

At its best, there are five processes involved

  1. Switch to the master
  2. Automated testing
  3. Eslint check
  4. packaging
  5. release

So you just need to write an SH script to control the flow and use direct scripting to make all the current release flow follow the same pattern

Of course, if there is a special process in the middle, you can extend the process by yourself

It would be much more convenient if you integrated this step directly into git hooks, which will be uploaded by default when merged into master, even if the current version is clean

At the end

This component library is relatively simple and nothing special, but it can give a simple processing

During the testing process, you may encounter a problem, after vite started the service, the access is 404, the specific reason can continue to pay attention to this issue