vite 开发过程是直接将文件给浏览器【热度: 107】

关键词：vite 与 esbuild

那比如我使用的是比如我开发是使用的 less + ts + react 他是怎么处理的

Vite 不是直接将原始文件给浏览器
- Vite 是一个基于原生 ES 模块的前端构建工具。在开发过程中，它利用浏览器对原生 ES 模块的支持来提供快速的开发服务器。当你启动 Vite 开发服务器时，它会将你的项目文件作为模块加载。
- 对于像less、ts、react这样的文件类型，Vite 有相应的处理机制。
处理 Less 文件
- Vite 使用插件来处理 Less 文件。它会通过vite - less插件（在 Vite 生态中用于处理 Less）来将 Less 文件编译成 CSS。
- 当浏览器请求一个 Less 文件对应的模块时，Vite 开发服务器会拦截这个请求。例如，如果你在一个 JavaScript 文件中导入了一个 Less 文件，像import './styles.less';。
- Vite 会使用vite - less插件将 Less 文件编译成 CSS，然后通过style标签或者link标签（根据配置）将生成的 CSS 注入到 HTML 页面中，使得样式能够生效。这个编译过程是基于 Less 的语法规则，将 Less 中的变量、嵌套规则等编译成浏览器能够理解的普通 CSS 样式。
处理 TypeScript 文件
- Vite 本身对 TypeScript 有很好的支持。它利用浏览器原生的 ES 模块加载能力，在开发过程中，对于.ts和.tsx文件，Vite 会将它们视为 ES 模块。
- 当浏览器请求一个 TypeScript 文件对应的模块时，Vite 会进行即时编译（Just - in - Time，JIT）。它会根据 TypeScript 的语法规则将 TypeScript 代码编译成 JavaScript 代码。
- 例如，对于一个简单的 TypeScript 文件main.ts：
```
let myVariable: number = 10;
console.log(myVariable);
```
  Vite 会在内存中即时将其编译成等价的 JavaScript 代码：
```
let myVariable = 10;
console.log(myVariable);
```
  然后将编译后的 JavaScript 代码发送给浏览器，浏览器就能够正常执行这些代码了。而且 Vite 会根据 TypeScript 的模块导入和导出规则正确地处理模块之间的关系。
处理 React 文件（.tsx文件)
- 对于 React + TypeScript（.tsx文件），Vite 同样利用上述 TypeScript 的即时编译机制。
- 例如，对于一个简单的 React 组件文件App.tsx：
```
import React from "react";
const App: React.FC = () => {
  return <div>Hello, Vite with React and TS!</div>;
};
export default App;
```
- Vite 会先将tsx文件中的 TypeScript 部分编译成 JavaScript，同时会保留 React 的 JSX 语法。因为现代浏览器虽然不能直接理解 JSX 语法，但是 Vite 会通过@vitejs/plugin - react插件等手段来处理 JSX。
- 这个插件会将 JSX 语法在发送给浏览器之前转换为浏览器能够理解的React.createElement函数调用形式（或者其他等价的高效形式，比如使用jsx - runtime）。例如，上面的App.tsx中的 JSX 部分可能会被转换为类似以下的 JavaScript 代码：
```
import React from "react";
const App = () => {
  return React.createElement("div", null, "Hello, Vite with React and TS!");
};
export default App;
```
- 这样转换后的代码就可以在浏览器中正常运行，并且能够正确地渲染 React 组件。