Build a production version – library mode
Vue-cli comes with WebPack’s packaging method, the played bag is a bit big, and Vite comes with Rollup packaging, this way is very small, there are some instructions for the official website, so after learning, It is very convenient.
Vite’s library project can be divided into two categories: (I am divided into it)
- One is a pure JS project without html;
- One is a project that can bring HTML (template), such as a UI library.
The following introduces the preparation and packaging methods, in fact, in fact.
Use Vite to build a project, here is a simple example:
The code is relatively simple, just a demo.
If you want to pack, you can only have an export file, so the interior code structure is set.
Pure JS is good, the export output is good, then what should I do with template? In fact, it is also the same.
Create a project with Vite to create a test file:
This is a library based on the UI library, using two third-party plug-ins:
- One is Element-Plus, which is loaded on demand;
- One is the NF-UI-Controller library they do.
Then we set an entry file main.js
If there are many components, we must consider the structure, here is just an example.
After the code is written, you need to set up vite.config.js
- Entry: Specifies the entry file to be packaged.
- Name: Name of the package
- FileName: The name of the package file, the default is UMD and ES two files.
- SourceMap: Do you generate .map files, default is not generated, if you need it, you need to set it to true.
- RollupOptions: If the project references a third-party plugin, you need to set it here. If you don’t set it, the source code of the third-party plugin will be packaged, so that the package file is getting bigger. The third party’s plug-in will exist alone.
Vite will pack it according to the settings here, and pack them into two modes:
- UMD: After packaging, the code is very compact, small size, but it is not easy to read;
- ES: The packaged code and the code we wrote are very like, easy to read, but the volume is large.
If the project uses a third-party plugin, you need to do settings in External:
After setting, the code of the third party plug-in will be referenced in the way in import.
If you don’t set it, you will use the code that is used in the third party plugin, and take it out as the internal code to be packaged together, so the volume of the package becomes bigger.
Setting package.json is mainly published as a description of the resource package, you need to set the properties according to NPM requirements:
If you do not want to install a third-party plug-in when installing the resource package, you need to remove DependenCies and DevDependenCIs, otherwise the third-party plug-in that is automatically installed.
After setting up, we can pack it with Yarn Build.
The packaged file is this style:
Brief introduction to the steps:
- First to npmjs.com website registration account;
- To register an email to activate the account;
- Open the terminal and log in with npm login;
- Published using NPM Publish;
The space is limited, and the details will not be introduced.
I like to use Yarn to install resource packages because the speed is faster.
Package.json Set the name of the installation is the name of the installation, so you have a good name and you can’t repeat with the existing name.
Will there be such a need?
When writing, the library project needs a development environment, while writing code, while running.
After writing, you need to pack it by library project.
Then there is a test environment, or demonstrate the environment?
If you build a project write test and demonstration, then it is a bit trouble, if you can get more in a project.
At this time, you need to set different Vite.config.js.
The way to use the comment before the change is more troublesome. Now found that Vite provides "Mode" way, allowing us to do different settings in Vite.config.js.
According to the official website, we can build multiple .env. * Files to store different "modes":
.ENV: Development environment (default)
.env.project: Test, demo
.env.lib: library package
After setting it, we will modify vite.config.js
In Vite.config.js, first define different defineconfig spare, then use the loadenv read mode value, return the corresponding defineconfig according to the mode.
Note: You need to set a folder of different outputs, otherwise it will be overwritten.
Set the executed command, add the desired mode.
This allows you to completely separate different environments. If there are other needs, you can also add more modes.
Changeable package command
In this way, all of them do not interfere, nor do you have any writes.
After the project package is released to npmjs.com, you can use https://unpkg.com/xxx to access, XXX indicates the name of the resource package, such as: