0 Previous live review

Last time I put together all the content of the “Vue DevUI Open Source Guide” series 1-6, and gave birth to the Mini-Vue-Devui project. Mini-vue-devui is a mini-version of the component library product, which currently includes:

  1. vite+vue3+ts+jsx+sassFoundation engineering of
  2. Based on thevitepress+vitepress-theme-demoblockDocument system
  3. jest+@vue/test-utilsUnit test environment
  4. A usejsxThe first version of the Tree component
  5. A).devui-cliThe scaffold

At the end of the live broadcast, we quickly went through the process of setting up the unit test environment, but we didn’t teach them by hand. Instead, we left an assignment, which was submitted by QbjGKNick first.

The final effect is as follows:

Last live article:

  1. Build a VUE3 component library from 0 to 1: Mini-vue-devui
  2. Add unit tests to the Vue Devui component library project

But is that all there is to a component library?

This is just the tip of the iceberg.

In this installment, we will continue the live broadcast, refining the Mini-Vue-Devui project, getting through the process of building component libraries on demand, and adding support for Monorepo.

1 Component library entry file

devui/vue-devui.ts

import type { App } from 'vue' import TreeInstall, { Tree } from './tree' const installs = [ TreeInstall, ] export {Tree,} export default {version: '0.0.1', install(app: app): void { installs.forEach((p) => app.use(p as any)) } }Copy the code

2 Add the full build script

New devui-cli/commands/build.js file

const path = require('path') const fs = require('fs') const { defineConfig, build } = require('vite') const vue = require('@vitejs/plugin-vue') const vueJsx = require('@vitejs/plugin-vue-jsx') const entryDir = path.resolve(__dirname, 'devui-vue/devui') const outputDir = path.resolve(__dirname, 'devui-vue/build') const baseConfig = defineConfig({ configFile: false, publicDir: false, plugins: [ vue(), vueJsx() ] }) const rollupOptions = { external: ['vue', 'vue-router'], output: { globals: { vue: Const buildAll = async () => {await build(defineConfig({... baseConfig, build: { rollupOptions, lib: { entry: path.resolve(entryDir, 'vue-devui.ts'), name: 'vue-devui', fileName: 'vue-devui', formats: ['es', 'umd'] }, outDir: outputDir } })) } const buildLib = async () => { await buildAll() } buildLib()Copy the code

Change 3package.json

"main": "vue-devui.umd.js",
"module": "vue-devui.es.js",

"build:components": "node ./devui-cli/commands/build.js",
"build:lib": "yarn predev && yarn build:components && cp package.json build && cp README.md build",
Copy the code

Test the full component library build

yarn build:lib
Copy the code

Using component libraries

src/main.ts

import { createApp } from 'vue' import App from './App.vue' // import Tree from '.. /devui/tree' import MiniVueDevUI from '.. /build' createApp(App) // .use(Tree) .use(MiniVueDevUI) .mount('#app')Copy the code

Start the

yarn dev
Copy the code

4 Added on-demand build scripts

Modify the devui-cli/commands/build.js file

Const fsExtra = require('fs-extra') // Build on demand const buildSingle = async (name) => {await build(defineConfig({... baseConfig, build: { rollupOptions, lib: { entry: path.resolve(entryDir, name), name: 'index', fileName: 'index', formats: ['es', 'umd'] }, outDir: path.resolve(outputDir, // Generate package.json file const createPackageJson = (name) => {const fileStr = '{"name": "${name}", "version" : "0.0.0", "main" : "index. The umd. Js", "the module" : "index. Es. Js", "style" : "style.css" }` fsExtra.outputFile( path.resolve(outputDir, `${name}/package.json`), fileStr, 'utF-8')} const buildLib = async () => {await buildAll() // Get an array of component names const Components = fs.readdirSync(entryDir).filter(name => { const componentDir = path.resolve(entryDir, name) const isDir = fs.lstatSync(componentDir).isDirectory() return isDir && Fs.readdirsync (componentDir).includes('index.ts')}) // loop one component at a time to build for(const name of Components) {// Build single component await BuildSingle (name) // Build component package.json file createPackageJson(name)}} buildLib()Copy the code

Tests are built on demand

yarn build:lib
Copy the code

Using component libraries

src/main.ts

import { createApp } from 'vue' import App from './App.vue' // import Tree from '.. /devui/tree' // import MiniVueDevUI from '.. /build' import Tree from '.. /build/tree' createApp(App) // .use(Tree) // .use(MiniVueDevUI) .use(Tree) .mount('#app')Copy the code

Start the

yarn dev
Copy the code

Normal!

Reference:

  • Build: Adds on-demand packaging scripts
  • The Vite library model builds production versions