前言
上篇文章分享了如何使用 rollup 搭建组件库，并且使用 npm link 来测试 rollup 的构建产物。最后文章遗留了一个问题，即组件库的开发环境不是很友好，测试组件还需要消费端的支持
这篇文章来分享在组件库中，搭建一个开发环境，无需构建过程，就可以对开发的组件进行测试，并且组件的更改马上可以在浏览器中看到
开发环境，我体验的最好的就是 vite 了，开箱即用，而且能实现项目的秒开，是前端项目开发的不二首选
回顾
回顾一下上篇文章搭建好的组件库：
一共两个组件，Button 和 Input
使用 rollup 构建，构建产物是 esm 格式，输出目录在 dist 中
构建产物也没有打包处理，而是按照原来的文件结构输出。同时生成了对应的类型文件，放在了 types 文件夹中。
这是对应代码仓库：rollup-build (github.com)
搭建开发环境
因为需要用到 vite，和 react，所以需要安装 vite 和 解析 react 代码的插件@vitejs/plugin-react
npm i vite @vitejs/plugin-react
然后在组件库目录中新建一个 dev 目录
mkdir dev
配置 vite
在 dev 目录下创建一个 vite 配置文件 vite.config.js
const { default: viteReact } = require("@vitejs/plugin-react");
const path = require("path");
/**@type {import('vite').UserConfig} */
module.exports = {
Plugin: [viteReact()],
server: {
open: true,
port: 8088,
},
resolve: {
alias: {
"rollup-build": path.resolve(__dirname, "../src"),
},
},
};
配置中，使用了@vitejs/plugin-react插件来解析 react 语法。设置开发服务器端口号为 8088，并且在启动 server 之后，自动打开浏览器
还设置了 alias，将rollup-build指向组件库的目录。这个很有用，为的就是在开发环境中，有真实的组件库调用体验
没有 alias 之前，是这样调用的：
import {Button} from '../src/Button';
有了 alias 后，是这样调用的：
import {Button} from 'rollup-build/Button'
配置 typescript
配置了 alias 后，vite 是认识了，但是 ts 并不认识，会报错：
所以需要给 typescript 加上 paths 的配置，
{
"compilerOptions":{
"paths": {
"rollup-build/*": [
"./src/*"
]
},
}
}
为了方便理解，paths 配置需要加在组件库中的 tsconfig.json 文件中
然后再在 dev 目录下面新建一个 tsconfig.json。建好后，整个组件库就有两个 ts 配置文件了：
里面一个，外面一个
里面的配置文件的内容如下：
{
"extends": "../tsconfig.json",
"compilerOptions": {
"jsx": "react-jsx"
},
"include": [
"src"
]
}
为什么需要两个 tsconfig.json。这个说来话长了。
如果只用外面的配置文件会出现什么情况？
现在外面配置文件的主要内容如下：
{
"compilerOptions": {
"rootDir": "./src",
"baseUrl": "./",
"jsx": "react-jsx",
"declaration": true,
"emitDeclarationOnly": true,
"isolatedModules": true,
"outDir": "./dist/types",
"lib": [
"es2020",
"DOM"
],
"paths": {
"rollup-build/*": [
"./src/*"
]
},
},
"include": [
"./src/**/*"
]
}
由于其中的 include 是 src 文件夹：
导致 dev 中的 TS 识别出错，如果在 include 中添加 dev 文件夹的路径：
tsconfig.json 配置文件又会报错
主要的意思是 rootDir 应该包含所有的源文件，但是现在的rootDir为./src,与 include 范围不相同，所以报错。
那好，那就修改下 rootDIr，使其范围不仅有 src 文件夹，还有 dev 文件夹：
这时候 build 一下，看看会发生什么：
可以看到，构建产物中的 types 文件夹下面多了一个 dev 文件夹，这是我们不想看到的。dev 只是用于开发测试，是不应该放进来的。
所以只用外面的 ts 配置文件是不妥的，得两个一起用！
分析内部的 ts 配置文件
现在回过头来看看 ts 内部的配置文件
{
"extends": "../tsconfig.json",
"compilerOptions": {
"jsx": "react-jsx"
},
"include": [
"src"
]
}
首先使用 extends 继承外面的配置文件，然后include src 文件夹，表示在当前文件夹下只需要分析 src 文件中内容即可
"jsx": "react-jsx"为 react 开发服务的，有了这个配置后，tsx 中不单独引入 react 就不会报错了。
ts 应该给个默认值为react-jsx，不然每次都要加这个东西。看看人家 babel 都支持这功能多少年了
到这里，dev 环境的配置就做好了，下面开始正式编写代码
引入组件，做测试
在 src 文件夹下，新建 index.tsx, App.tsx
// index.tsx
import * as ReactDOM from 'react-dom/client'
import App from './App';
ReactDOM.createRoot(document.getElementById('root')!).render(<App />)
//App.tsx
import Button from "rollup-build/Button"
import Input from "rollup-build/Input";
const App = () => {
return <div>
<Button contents='' />
<Input />
</div>
}
export default App;
在 App.tsx 中引入了两个组件，一个是 Button，一个是 Input，路径是上面配置的 alias，指向组件库的 src 文件夹
代码写好了，下面就看看是否执行 OK
启动开发环境项目
添加一个 npm script：
{
"scripts":{
"dev": "cd ./dev && vite"
}
}
在 dev 目录中并没有创建一个 package.json，而是在组件库的 package.json 中添加 npm script
执行 npm run dev之后，就会进入 dev 文件夹之后，再去执行 vite 命令
项目成功运行
修改下 App.tsx 的代码：
保存，浏览器自动刷新：
页面上也多了 i am app
热部署和自动刷新也没有问题。搞定！！
这是dev目录的代码：add-dev (github.com)
总结：
这篇文章分享了如何为组件库项目添加开发环境。使用的 vite 工具，能够实现低配置，秒开项目的极佳体验，大赞。有了开发环境之后，就不需要等到组件库构建之后才可以测试了
原文链接：https://juejin.cn/post/7313834600719237183 作者：慢功夫
