😛承接上文，用vite搭建rollup组件库的开发环境

前言

上篇文章分享了如何使用 rollup 搭建组件库，并且使用 npm link 来测试 rollup 的构建产物。最后文章遗留了一个问题，即组件库的开发环境不是很友好，测试组件还需要消费端的支持

这篇文章来分享在组件库中，搭建一个开发环境，无需构建过程，就可以对开发的组件进行测试，并且组件的更改马上可以在浏览器中看到

开发环境，我体验的最好的就是 vite 了，开箱即用，而且能实现项目的秒开，是前端项目开发的不二首选

回顾

回顾一下上篇文章搭建好的组件库：

一共两个组件，Button 和 Input

使用 rollup 构建，构建产物是 esm 格式，输出目录在 dist 中

构建产物也没有打包处理，而是按照原来的文件结构输出。同时生成了对应的类型文件，放在了 types 文件夹中。

这是对应代码仓库：rollup-build (github.com)

搭建开发环境

因为需要用到 vite，和 react，所以需要安装 vite 和解析 react 代码的插件@vitejs/plugin-react

shell 复制代码

npm i vite @vitejs/plugin-react

shell 复制代码

mkdir dev

配置 vite

在 dev 目录下创建一个 vite 配置文件 vite.config.js

javascript 复制代码

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 之前，是这样调用的：

javascript 复制代码

import {Button} from '../src/Button';

有了 alias 后，是这样调用的：

javascript 复制代码

import {Button} from 'rollup-build/Button'

配置 typescript

配置了 alias 后，vite 是认识了，但是 ts 并不认识，会报错：

所以需要给 typescript 加上 paths 的配置，

json 复制代码

{
  "compilerOptions":{
    "paths": {
      "rollup-build/*": [
        "./src/*"
      ]
    },
  }
}

为了方便理解，paths 配置需要加在组件库中的 tsconfig.json 文件中

然后再在 dev 目录下面新建一个 tsconfig.json。建好后，整个组件库就有两个 ts 配置文件了：

里面一个，外面一个

里面的配置文件的内容如下：

json 复制代码

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

为什么需要两个 tsconfig.json。这个说来话长了。

如果只用外面的配置文件会出现什么情况？

现在外面配置文件的主要内容如下：

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 内部的配置文件

json 复制代码

{
  "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

tsx 复制代码

// index.tsx
import * as ReactDOM from 'react-dom/client'
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(<App />)

tsx 复制代码

//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：

json 复制代码

{
  "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 工具，能够实现低配置，秒开项目的极佳体验，大赞。有了开发环境之后，就不需要等到组件库构建之后才可以测试了