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

[yanlele]

关键词：vite 与 esbuild

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

1. Vite 不是直接将原始文件给浏览器
   • Vite 是一个基于原生 ES 模块的前端构建工具。在开发过程中，它利用浏览器对原生 ES 模块的支持来提供快速的开发服务器。当你启动 Vite 开发服务器时，它会将你的项目文件作为模块加载。
   • 对于像less、ts、react这样的文件类型，Vite 有相应的处理机制。
2. 处理 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 样式。
3. 处理 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 的模块导入和导出规则正确地处理模块之间的关系。
4. 处理 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 组件。