本文记录一次使用vite + typescript + react开发UI组件并打包的过程，帮助自己及读者理顺基本的vite对于 本地开发/打包配置/发布注意项 相关的知识。示例代码可在本人的github上查看。
Node环境
读者可以确认自己的本地node环境，node版本不同在后续的讲解中，会导致一些特性的支持性稍微不一致。
- node版本：14.18.3
- npm版本：6.14.15
创建vite项目
创建react项目，使用ts开发，所以选择react-ts模板
// npm版本不同命令会有所区别，具体查看官网
npm create vite@latest react-ts-app --template react-ts
vite支持的模板比较多，可以根据自己的情况实际去选择，具体的模板列表可以点击查看。
初始的项目文件目录及列表如下图所示
安装依赖并运行
命令行cd到项目根目录，运行yarn安装依赖
yarn
依赖安装完毕后，打开node包描述文件package.json。
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
}
可以看到scripts下默认有3个命令
-
dev: 开发环境预览 -
build: 生成生产版本的文件 -
preview: 对build后的文件本地预览
当前处于开发阶段，直接使用开发环境预览命令，在本地网页上查看效果。
yarn dev
很棒！一个react大logo显示在本地启动的页面上。👏👏👏。至此，vite创建的react-ts项目完成。
配置库模式
vite支持库模式，也就是所谓的打包为一个库供其他开发人员引入使用。这里可以参考vite库模式的官方文档操作，点击这里。
先看看官方给出的js配置示例
// vite.config.js
const path = require('path')
const { defineConfig } = require('vite')
module.exports = defineConfig({
build: {
lib: {
entry: path.resolve(__dirname, 'lib/main.js'),
name: 'MyLib',
fileName: (format) => `my-lib.${format}.js`
},
rollupOptions: {
// 确保外部化处理那些你不想打包进库的依赖
external: ['vue'],
output: {
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
globals: {
vue: 'Vue'
}
}
}
}
})
这个示例是基于vue开发框架进行配置的，没关系，开发者根据实际情况做一些简单的配置修改即可。回到本文的案例，基于react开发/使用typescript语言，初始化的配置文件内容如下
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()]
})
根据库模式的配置说明，进行修改后的配置文件如下：
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import * as path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
}
},
build: {
lib: {
// 打包的入口文件
entry: path.resolve(__dirname, 'src/App.tsx'),
name: 'App',
fileName: (format) => `flow-builder.${format}.js`
},
rollupOptions: {
external: ['react', 'react-dom'],
}
},
})
配置修改点如下：
- 支持react(
基本) - 支持less编译
- 扩展rollup配置，不打包宿主环境的依赖库
相应的配置项说明，不再做详细说明，相关的知识可以在vite官网的文档中找到更为详尽的描述。这里需要稍微提一下的就是，默认会生成es和umd两个格式的js文件。
本地开发调试
既然是开发库，那么在发布出去给其他开发者使用之前，自己的体验和测试是避免不了的。vite库模式在本地开发调试的体验上相当丝滑。不需要另外启动一个测试项目，在本地项目即可完成二者的完美统一。
具体分为以下几步：
-
src同级创建examples目录，当然也可以命名为你喜欢的任何名称
创建examples目录 examples目录下引入库入口文件，本示例为src/App.tsx
import React from "react";
import ReactDOM from "react-dom";
// 这里是重点！！！
// App为库的入口，模拟外部引入
import App from "../src/App";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
- 修改
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<!-- 这里是重点！！！ -->
<!-- src的路径改为examples下的文件路径 -->
<script type="module" src="/examples/index.tsx"></script>
</body>
</html>
- 本地体验，
yarn dev
生成类型定义文件
经过上面配置之后，本地开发库并且体验库功能已经比较顺畅。但库开发完下一步就是打包发布，将库提供给更多的开发者使用。因为项目使用ts开发，因此在编译打包前，需要修改typescript.config.json中的编译选项
{
"compilerOptions": {
// 开启类型定义文件生成的开关
"noEmit": false,
"declaration": true,
// 类型定义文件生成的目标目录
"outDir": "types",
// 只emit类型定义文件，而不emit其他诸如source-map等
"emitDeclarationOnly": true,
}
}
社区也有相关的vite插件，插件地址。实现原理是使用ts-morph生成相应的类型申明文件。感兴趣的读者可以自行尝试。
通过上述配置，打包时会在包目录下生成名为types的目录，同时库中ts/tsx中定义的类型会生成相应的xxx.d.ts。如下图所示：
配置包发布文件列表和类型定义入口
先抛出包相关的配置项，如下
{
"files": [
"dist",
"types"
],
"main": "./dist/react-ts-app.umd.js",
"typings": "types/App.d.ts",
}
-
files：包作为依赖时，被打包的文件规则列表。示例中打包
dist中的js和css文件，以及types中的类型定义文件 -
typings: 指定类型定义入口，跟
types效果一样 - main：指明打包后的主入口
经过上面一系列的配置之后，可以愉快地(😊)开始库开发与调试，相信把包推到市场就不需要cluo赘述了。
初步尝试，欢迎交流。
