This article will introduce how to use vite to package our component library, and tell you how to use a plug-in to automatically generate a declaration file (*.d.ts) from the
packaged
file Very simple, first install vite globally and @vitejs/plugin-vue
pnpm add vite @vitejs/plugin-vue -D -w
Create a new vite.config.ts configuration file under the components file
import { defineConfig } from “vite”;
import vue from “@vitejs/plugin-vue”;
export default defineConfig({ build: { //packaged file directory outDir: " es”, //compression minify: false, rollupOptions: { //Ignore packaging vue files external: [“vue”], //input: [“index.ts”], output: { globals: { vue: “Vue” , }, dir: “dist”, }, }, lib: { entry: “./index.ts”, name: “easyest”, fileName: “easyest”, formats: [“es”, “umd”, “ cjs”], }, }, plugins: [vue()], });
Then add the packaging command scripts "scripts": { "build": "vite build" } in components/package.json ,
Execute pnpm run build
At the same time, the packaged dist file is generated
However, this packaging method will eventually package the entire component library into one file, and the style file cannot be loaded on demand, so we need to modify the configuration to make the packaged structure consistent with the structure we developed. We will package the package as follows Put the files in the easyest directory, because the name of the subsequent component library is easyest, of course, you can freely
import { defineConfig } from “vite”;
import vue from “@vitejs/plugin-vue”;
export default defineConfig({ build: { //package file directory outDir: “es”, //compression //minify: false, rollupOptions: { //ignore packaging vue files external: [“vue”], input: [“index.ts”], output: [ { //Package format format: "es", //Package file name entryFileNames: "[name].mjs", //Let the package directory correspond to our directory preserveModules: true, exports: "named", / /Configure packaging root directory dir: “…/easyest/es”, },
{ //Package format format: "cjs", //Package file name entryFileNames: "[name].js", //Let the package directory correspond to our directory preserveModules: true, exports: "named", //Configure packaging root dir: “…/easyest/lib”, }, ], }, lib: { entry: “./index.ts”, }, }, plugins: [vue()], });
Execute pnpm run build, and the packaged file directory is generated as follows
But at this time, all style files will still be packaged into style.css, and styles cannot be loaded on demand, so next we will let vite not package style files, and style files will be packaged separately later.
In fact, the packaged component library
can only be used by the js project when the declaration file is here. Some errors will occur when running under the ts project, and the code prompt function will be lost when using it. In this way, we will lose the meaning of using ts to develop the component library up. So we need to add a declaration file (.d.ts) to the packaged library.
Install vite-plugin-dts, note that the version should be the same
pnpm add [email protected] -D -w
Introduced in vite.config.ts, note that the component naming plug-in DefineOptions is also added here (as mentioned in the previous article, note that this should be written after dts, there may be errors in the source code)
import { defineConfig } from “vite”;
import vue from “@vitejs/plugin-vue”;
import dts from “vite-plugin-dts”;
import DefineOptions from “unplugin-vue-define-options/vite”;
export default defineConfig({ plugins: [ vue(), dts( { entryRoot: “./src”, outputDir: [“…/easyest/es/src”, “…/easyest/lib/src”], //Specify the tsconfig.json used as the root directory of our entire project, if Without configuration, you can also create a new tsconfig.json under components tsConfigFilePath: “…/…/tsconfig.json”, }), DefineOptions(),
],
});
If you pack it again, you will find that the declaration file we need appears in the packaged file
In fact, most of the front-end construction scaffolding now supports esmodule, and esmodule itself supports on-demand loading, so the es format packaged by the component library has its own treeShaking itself, and no additional configuration is required to import it on demand. What we will do later is to make style files also support on-demand import, so stay tuned.