vite+react编写自己的绚丽组件库(二)---库文件打包

前言

前一章我们把项目都搭建好了，接下来我们来讲一下库文件的打包问题

库文件打包

我们要打包就要考虑如何兼容多种模块规范

第一，需要考虑的是需要支持哪些模块规范。

目前常见(不常见的还有古老的我们就不说了)的模块规范有：

IFFE：使用立即执行函数实现模块化例：(function()) {}； 非常适用于逻辑简单，无需搭建工程化环境的前端应用。
CJS：基于 CommonJS 标准的模块化；不可否认，有大量的存量代码还使用 CJS 规范，完全没有必要因为引入一个库去更改编译规则。
ESM：ES 标准的模块化方案 ( ES6 标准提出 )；标准目前已经是前端开发的标配，无论是选用 Webpack 还是 Vite ，都会采用这种模块规范。
UMD：兼容 CJS 与 AMD、IFFE 规范。

第二，需要考虑的是代码的压缩和混淆问题。

代码压缩是指去除代码中的空格、制表符、换行符等内容，将代码压缩至几行内容甚至一行，这样可以提高网站的加载速度。混淆是将代码转换成一种功能上等价，但是难以阅读和理解的形式。混淆的主要目的是增加反向工程的难度，同时也可以相对减少代码的体积，比如将变量名缩短就会减少代码的体积。

第三，还需要考虑 SourceMap 配置。

SourceMap 就是一个信息文件，里面存储了代码打包转换后的位置信息，实质是一个 json 描述文件，维护了打包前后的代码映射关系。通常输出的模块不会提供 SourceMap，因为通过 sourcemap 就很容易还原原始代码。但是如果你想在浏览器中断点调试你的代码，或者希望在异常监控工具中定位出错位置，SourceMap 就非常有必要。所以还是要正确掌握 SourceMap 的生成方法。

配置vite打包

首先是 rollupOptions 配置。由于 Vite 的构建是通过 rollup 完成的，所以 rollup 中的一些配置通过这个属性传递给 rollup。其中需要配置的两个属性如下：

external：作用是将该模块保留在 bundle 之外，比如在数组中添加了 vue ，就是为了不让 vue 打包到组件库中；
output：这个配置用于 umd/iffe 包中，意思是全局中的某个模块在组件库中叫什么名字。比如：

我们现在的vite.config.ts是什么样子？

js 复制代码

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import Unocss from './config/unocss'

const resolvePath = (str: string) => path.resolve(__dirname, str)

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(), // 支持react
    // 添加UnoCSS插件
    Unocss()
  ],
  build: {
    outDir: 'dist', // 打包后的文件
    lib: {
      entry: resolvePath('packages/index.tsx'), // 配置库入口
      name: 'PeacockUI', // 库名称
      fileName: 'peacock-ui', // 文件名
      // 打包格式
      formats: ['es', 'cjs'] //打包的格式，主要是兼容es module和commonJs规范
    },
    rollupOptions: {
      external: ['react'], // 将react保留在bundle之外，不会将react导入到包中
      output: {
        globals: {
          react: 'react' // react在组件库中叫什么名字
        }
      }
    }
  }
})

minify: 是混淆的意思，这里面有两个混淆工具可以选择，即 terser 和 esbuild。我目前选择了比较老牌的压缩工具 terser，毕竟从 Rollup 时代开始就一直在用。
sourcemap: sourcemap方便我们调试

js 复制代码

// https://vitejs.dev/config/
export default defineConfig({
 
  build: {
    ...
    minify: 'terser', // boolean | 'terser' | 'esbuild'
    sourcemap: true, // 输出单独 source文件
    cssCodeSplit: true
  }
})

验证代码

example/main.tsx

js 复制代码

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import '../dist/index.css' // 此处引入css

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

example/App.tsx

js 复制代码

import React from 'react'
import { Button } from '../dist/peacock-ui' // 从打包的库里面引入ui组件

function App() {
  return (
    <div className="App">
      <section>
        <Button color="green">Click</Button>
        <Button color="yellow">Click</Button>
        <Button color="red">Click</Button>
        <Button color="blue">Click</Button>
      </section>
    </div>
  )
}

此时看一下页面，good，符合预期

参考

基于 Vite 的组件库工程化实战