Biblioteca de componentes Vue empaquetados de resumen

¡Acostúmbrate a escribir juntos! Este es el tercer día de mi participación en el "Nuggets Daily New Plan · April Update Challenge",Haga clic para ver los detalles del evento。

Embalaje enrollable

El objetivo de este capítulo esComponentes basados ​​en el marco del libro de cuentosSe publica el proyecto.

Antes de lanzar el proyecto, también necesitamos empaquetar el proyecto, aquí elegimos usar Rolluppackage .

Por qué elegir usar Rollupenvases

• RollupEs un empaquetador de módulos y webpacksimilar, muchas bibliotecas y marcos de código abierto usan Rollupempaquetado
• RollupAdmite Tree-shaking, en código de análisis estático de código abierto import, excluir código que no se utiliza
  • webpackAunque también es compatible, necesitamos configurarlo manualmente
• El resultado empaquetado webpackes
• Es Rollupmás

Artículo de referencia:El uso de la herramienta de empaquetado Rollup (súper detallado, súper básico, súper simple con capturas de pantalla de código)

Instalar dependencias

Debido a que necesitamos usarlo Rolluppara empaquetar, necesitamos instalar todas sus dependencias.

• Rollup

• rollup-plugin-terser: comprimir el código

• [email protected]: Compile componentes de un solo archivo en código js.

  • ¿Por qué especificar una versión? Porque su último componente es para Vue3 y mi código actual es para Vue2..

• vue-template-compiler: Creación de un rollup-plugin-vuetrabajo vinculado

yarn add rollup rollup-plugin-terser rollup-plugin-vue@5.1.9 vue-template-compiler -D -W
复制代码

Rolluparchivo de configuración

Después de instalar las dependencias, necesitamos configurar Rolluplos archivos de configuración. Aquí primero mostramos buttonel empaquetado de , y luego demostraremos el empaquetado de todos los componentes.

buttonembalaje

Primero creamos un archivo en buttonla rollup.config.jscarpeta

estructura de archivos

Contenido de configuración

import vue from 'rollup-plugin-vue'
import { terser } from 'rollup-plugin-terser'


import { terser } from 'rollup-plugin-terser'
import vue from 'rollup-plugin-vue'

module.exports = [
  {
    input: 'index.js',
    output: [
      {
        file: 'dist/index.js',
        format: 'es'
      }
    ],
    plugins: [
      vue({
        // Dynamically inject css as a <style> tag
        css: true, 
        // Explicitly convert template to render function
        compileTemplate: true
      }),
      terser()
    ]
  }
]
复制代码

Este archivo de configuración webpacktambién es muy similar, configuramos por separado:

• entrada (entrada)
• exportar (salida)
• Complementos

Paquete

Luego modificamos los buttonarchivos package.jsonen la carpeta

"scripts": {
    // 添加
    "build": "rollup -c",
  },
复制代码

Ejecutando el script En este punto, nuestro script ha terminado de ejecutarse, ¡pero! El problema es que tenemos muchos componentes con muchas carpetas y no se pueden empaquetar uno por uno como botones, entonces, ¿cómo lo hacemos? ? ?

empaquetar todos los componentes

Aquí necesitamos agregar algunos archivos de dependencia más:

• plugin-json: puede dejar que el paquete acumulativo cargue el archivo json, que usaremos en el archivo de configuración
• rollup-plugin-postcss:(rollup-plugin-postcss no admite dos soluciones para menos importaciones)[juejin.cn/post/692083…]
• plugin-node-resolve: empaquete los paquetes de terceros dependientes en

yarn add @rollup/plugin-json rollup-plugin-postcss @rollup/plugin-node-resolve -D -W
复制代码

archivo de configuración

Cree rollup.config.js en el directorio raíz del proyecto

import fs from 'fs'
import path from 'path'
import json from '@rollup/plugin-json'
import vue from 'rollup-plugin-vue'
import postcss from 'rollup-plugin-postcss'
import { terser } from 'rollup-plugin-terser'
import { nodeResolve } from '@rollup/plugin-node-resolve'

const isDev = process.env.NODE_ENV !== 'production'

// 公共插件配置
const plugins = [
  vue({
    // Dynamically inject css as a <style> tag
    css: true,
    // Explicitly convert template to render function
    compileTemplate: true
  }),
  json(),
  nodeResolve(),
  postcss({
    // 把 css 插入到 style 中
    // inject: true,
    // 把 css 放到和js同一目录
    extract: true
  })
]

// 如果不是开发环境，开启压缩
isDev || plugins.push(terser())

// packages 文件夹路径
const root = path.resolve(__dirname, 'packages')

module.exports = fs.readdirSync(root)
  // 过滤，只保留文件夹
  .filter(item => fs.statSync(path.resolve(root, item)).isDirectory())
  // 为每一个文件夹创建对应的配置
  .map(item => {
    const pkg = require(path.resolve(root, item, 'package.json'))
    return {
      input: path.resolve(root, item, 'index.js'),
      output: [
        {
          exports: 'auto',
          file: path.resolve(root, item, pkg.main),
          format: 'cjs'
        },
        {
          exports: 'auto',
          file: path.join(root, item, pkg.module),
          format: 'es'
        },
      ],
      plugins: plugins
    }
  })
复制代码

Configurar scripts en package.json en el directorio raíz

"build": "rollup -c"
复制代码

Establezca los campos principal y de módulo en package.json en cada paquete

"main": "dist/cjs/index.js",
"module": "dist/es/index.js"
复制代码

En este punto, nuestra configuración ha terminado.