Paquete de la biblioteca de componentes de Webpack Guía súper detallada

¡Acostúmbrate a escribir juntos! Este es el cuarto día de mi participación en el "Nuevo plan diario de los Nuggets·Desafío de actualización de abril", haz clic para ver los detalles del evento .

Este artículo describe el proceso de empaquetar una biblioteca de componentes con Webpack desde cero.

1. Inicializar el proyecto

vue init webpack-simple tip-components
复制代码

Optimizar la estructura de directorios

Modifique la estructura del proyecto, la siguiente estructura de directorio es relativamente clara y razonable.

Creamos una nueva compilación para la configuración de empaquetado, doc para almacenar documentos y lib para almacenar archivos de salida de empaquetado.

Estructura de directorios

2. Configuración de embalaje

Es una buena práctica poner configuraciones de empaquetado para diferentes requisitos en diferentes archivos.

Nuestra configuración de empaquetado tiene un archivo de clase base y, de acuerdo con los diferentes requisitos de empaquetado, existen diferentes archivos de subclase: empaquetado de biblioteca de componentes completa, empaquetado de un solo componente, proyectos de ejemplo de empaquetado.

scriptSimplifique los comandos de empaquetado configurando scripts en npm .

comando de paquete

(Qué hace el comando, qué archivo de configuración elegir, consulte package.json)

Ejecutar el proyecto de muestra npm run test

Empaquete la biblioteca de componentes completa npm run build

Paquete de componentes individuales npm run build:components

Generar documentación de componentes npm run build:doc

* Agregue cualquier comando de empaquetado :analyze, habilite el webpack-bundle-analyzercomplemento y la página de análisis del paquete se abrirá una vez que se complete el empaquetado.

Nos fijamos principalmente en los siguientes tres archivos de configuración de empaquetado.

webpack.base.js

Configuración común del paquete web, incluidas las reglas de lectura y análisis para el módulo de configuración de reglas y el complemento webpack-bundle-analyzer.

//webpack.base.js
var path = require('path')
var webpack = require('webpack')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  module: {
    rules: [
    //……
    ]
  }
}

if (process.env.npm_config_report) {
  module.exports.plugins = (module.exports.plugins || []).concat([new BundleAnalyzerPlugin()])
}

复制代码

webpack.prod.js

Heredado de webpack.base.js, la configuración de empaquetado de la biblioteca de componentes completa, el archivo de salida es tip-components.min.js, incluidos todos los componentes. El formato modular es umd, que es adecuado para varios métodos de importación.

//webpack.prod.js
var path = require('path')
var webpack = require('webpack')
const merge = require('webpack-merge');
const webpackBaseConfig = require('./webpack.base.js');

const basePath = path.resolve(__dirname, '../')

module.exports = merge(webpackBaseConfig, {
  entry: path.join(basePath, 'src', 'enter.js'),
  output: {
    path: path.resolve(__dirname, '../lib'),
    publicPath: '/lib/',
    filename: 'tip-components.min.js',  // 输出文件名
    library: 'tip-components', // 组件库名称
    libraryTarget: 'umd',  //模块化格式
    umdNamedDefine: true
  },
  externals: {
    vue: {  //将vue依赖 "外部化",不打包进组件库
      root: 'Vue',
      commonjs: 'vue',
      commonjs2: 'vue',
      amd: 'vue'
    }
  },
});
复制代码

El archivo de entrada empaquetado aquí es src/enter.js, veamos qué hace este archivo de entrada.

enter.js
import dialog from './component/dialog/dialog.js'
import marquee from './component/marquee/main.js'
import toast from './component/toast/toast.js'
//……

const components = {
    dialog,
    marquee,
    toast,
    //……
}

export default components
复制代码

Aquí simplemente introducimos todos los componentes, los colocamos en componentes y luego los exportamos.

Agregamos un comando de empaquetado al archivo package.json.

"build": "webpack --config build/webpack.prod.js --progress --hide-modules",
复制代码

Ejecute npm run build, empaquete toda la biblioteca de componentes y ¡listo!

最后要提的配置文件是webpack.component.js,用于打包单个组件,我们放在下一节。

3. 分块打包配置

一般情况下,我们只需要用组件库中的一两个组件,引入整个组件库显然是不合理的。我们实现按需加载,按需加载的前提就是,我们的组件是支持一个一个单独打包的。

我们先新建一个components.json文件,用于配置哪些组件需要单独打包,以及组件的路径。

//components.json
{
    "marquee": "component/marquee/main.js",
    "toast": "component/toast/toast.js",
    "dialog": "component/dialog/dialog.js",
    //……
}
复制代码

webpack.component.js

继承自webpack.base.js,打包单个组件。

相比webpack.prod.js,我们把entry配置为多个入口,遍历components.json来填充组件的名称和路径信息。output只需要指定一个,用占位符确保输出文件位组件的名称。

var path = require('path')
var webpack = require('webpack')
const merge = require('webpack-merge');
const components = require('./components.json')
const webpackBaseConfig = require('./webpack.base.js');

const basePath = path.resolve(__dirname, '../')
let entries = {}
Object.keys(components).forEach(key => {
  entries[key] = path.join(basePath, 'src', components[key])
})

module.exports = merge(webpackBaseConfig, {
  entry: entries,
  output: {
    path: path.resolve(__dirname, '../lib'),
    publicPath: '/lib/',
    filename: '[name].js',
    chunkFilename: '[id].js',
    library: '[name]', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd',
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
  externals: {
    vue: {
      root: 'Vue',
      commonjs: 'vue',
      commonjs2: 'vue',
      amd: 'vue'
    }
  }
});
复制代码

我们在package.json文件里面添加一个打包命令。

"build:components": "webpack --config build/webpack.component.js --progress --hide-modules",
复制代码

运行npm run build:components,单独打包组件们,完成!

4. 按需引入组件

既然实现了单个组件的打包,我们当然不会每次都引入整个的组件库,在我们把组件库发布到tnpm后,为了引入单个组件,我们可以这样。

import dom2image from "@tencent/tip-components/lib/dom2image";
复制代码

但路径太长,太麻烦了。

babel-plugin-import

我们可以用babel-plugin-import插件,对路径做一个转换。

安装插件

npm install babel-plugin-import --save-dev
复制代码

在babel.config.js添加配置

//babel.config.js
plugins: [["import", {
	"libraryName": "@tencent/tip-components",
  "libraryDirectory": "lib",  // default: lib
}]]
复制代码

于是,我们可以直接这样用,默认去找到lib文件下的单个组件,美滋滋。

import { dom2image } from "@tencent/tip-components";
复制代码

5. 示例工程

为了方便在开发过程中调试组件,我们可以添加一个入口,用于拉起一个html页面进行调试。这与我们创建一个普通vue页面的操作是一样的,具体配置可以看webpack.demo.js。

我们添加一个打包命令,用webpack-dev-server跑一个示例页面的服务。

"test": "webpack-dev-server --config build/webpack.demo.js --open --hot",
复制代码

Cabe señalar que, dado que creamos webpack-simple al principio, no la versión completa de la plantilla del paquete web, debemos introducir activamente el archivo js de salida empaquetado dist/main.js en el archivo html Si su página de muestra está en blanco , compruebe que el archivo de salida se haya importado correctamente.

6. Generación de documentos

jsdoc

Aquí elegimos usar jsdoc para generar documentos automáticamente (más tarde descubrimos que los documentos generados directamente con jsdoc aquí no son atractivos, los ejemplos no pueden explicar claramente el uso, la falta de imágenes y demostraciones de GIF, jsdoc es suficiente como una API actualizada oportunamente) documento, pero para facilitar el inicio de los usuarios de la biblioteca, se recomienda organizar la documentación de los componentes usted mismo).

Para que los componentes de vue utilicen mejor las anotaciones para generar documentación, también usamos jsdoc-vuejscomplementos.

Archivo de configuración, consulte doc.conf.json.

Agregue un comando para generar documentación en package.json:

"build:doc": "jsdoc -c ./build/doc.conf.json ./src/*"
复制代码

npm run build:docse puede generar el documento.

El proceso específico de generación de documentos se puede ver en otro artículo Generación de documentos VueJS

0. Artículos de referencia

Cómo crear una biblioteca de componentes vue

Generación de documentación VueJS

Buenos artículos en el pasado.

"Adiós al mal código"

Mejores prácticas de especificación de código 2022 (con ejemplos de configuración óptima para web y applets)

[Exploración de front-end] ¡Diga adiós al código incorrecto! Encapsule las solicitudes de red con el patrón Cadena de responsabilidad

[Exploración de front-end] ¡Adiós al segundo número de código incorrecto! Encapsular componentes compartidos con patrón de estrategia

Código de vida

[Pensando en el desarrollo front-end durante tres años] ¿Cómo leer los requisitos de manera efectiva?

Una guía imperdible para pisar el foso de frente

[Exploración de front-end] Prácticas recomendadas para la optimización de la carga de imágenes

[Exploración de front-end] Exploración del terminal móvil H5 para generar capturas de pantalla y carteles

[Exploración de front-end] ¿H5 obtiene el posicionamiento del usuario? Suficiente para leer esto

[Exploración de front-end] Exploración de WeChat Mini Program Jump - ¿Por qué existe la pestaña abierta?

[Exploración de front-end] Uso sofisticado de vConsole

Supongo que te gusta

Origin juejin.im/post/7082738107237433375
Recomendado
Clasificación