乐趣区

关于前端:vite-超快且方便的编译工具

jiezi

咱们编写的代码，比方 ES6、TypeScript、react 等是不能被浏览器间接辨认的，须要通过 webpack、rollup 这样的构建工具来对代码进行转换、编译。

但随着我的项目越来越大，须要解决的资源越来越多，构建工具也须要很长的工夫能力开启服务，因而产生了新型的前端构建工具 Vite，能够晋升编译速度和缩小构建配置。

浏览器反对 esmodule

vite 基于 esmodule 来对资源进行解决，浏览器自身已反对 esmodule，html 文件引入 js 资源时，减少一个 type 类型即可。

<script src="./src/index.jsx" type="module"></script>

某些第三方库也有模块化的版本，比方 lodash，浏览器可间接反对 lodash-es，在 src/index.js 从 node_modules 中引入。

import _ from '../node_modules/lodash-es/lodash.js';
console.log(_.join(','));

这个时候关上 html 页面，咱们会发现 lodash.js 资源加载后，还发送了很多其它的 js 申请

间接应用浏览器反对的模块化，一方面申请资源十分多，另一方面如果不反对 esmodule 的库在浏览器运行就间接报错了。

如何解决资源

当存在浏览器所不能辨认的资源时，vite 首先通过 connect 解决成 esmodule 的内容，比方 index.ts 解决成 index.js，当申请 index.ts 文件的时候，重定向到已解决好反对 esmodule 的 index.js 文件上。

ES6、TS、React 等资源都是通过 ESBuild 来解决的，它相似 babel 工具，然而它具备更快的编译速度，因为是应用 Go 语言编写，无需通过字节码，可间接转换成机器代码。

vite 无需配置就能解决资源

应用 vite 和 webpack 一样，都须要全局或者我的项目装置依赖。

css

无论是 css、less 还是解决兼容性的 postcss，在 webpack 中都是须要借助适合的 loader 来对资源进行解决的，而 vite 中已内置解决，配置更为简略。

webpack vite
css css-loader –
less less-loader、less less
postcss postcss-loader、plugin 如 pocss-preset-env postcss-preset-env

postcss 解决兼容性的配置须要在 postcss.config.js 中定义

module.exports = {plugins: [require('postcss-preset-env')],
};
typescript

ts 代码也是不须要 loader 或者 plugin 来解决的，只须要装置 typescript

创立 ts 文件，将资源引入到入口 js 文件中

const mul = (a: number, b: number) => {return a * b;};
console.log(mul(6, 8));

通过 vite 开启服务，200ms 就开启，并且内置热更新

媒体资源

图片类资源在 webpack 中须要通过 url-loader、file-loader 或者配置 asset module type 来解决，在 vite 中，无需做任何配置，间接引入即可。

import cat from './image/cat.jpg';
const img = document.createElement('img');
img.src = cat;
img.width = 300;
document.body.appendChild(img);

在浏览器页面上就能够间接看到成果

jsx

react 代码也能够被 vite 辨认，但须要后缀应用 jsx，入口文件 index.js 改为 index.jsx，并批改 html 页面的引入。

<script src="./src/index.jsx" type="module"></script>

vite.config.js

尽管以上场景 vite 都曾经内置解决性能，但配置文件也不是齐全用不到的，默认配置文件名 vite.config.js，比方对于 vue 的解决。

import {createVuePlugin} from 'vite-plugin-vue2';
export default {plugins: [createVuePlugin()],
};

新增依赖被压缩会进行提醒

打包指令

  • npx vite 开启本地服务，内置了热更新
  • npx vite build 生成编译文件
  • npx vite preview 预览编译后的文件

创立 vite 我的项目

以上将 vite 作为工具来解决资源，还能够间接通过 vite 创立对于 react 或者 vue 的脚手架。执行 npm init vite 抉择须要的我的项目

创立实现后，通过 npm install 装置所须要的依赖，而后在 package.json 中查看指令，就能够启动啦~

总结

  • vite 基于 esmodule 来解决数据，应用到工具 ESBuild，编译速度十分快
  • css、less、typescript、react 在 vite 中能够间接应用
  • 默认配置文件 vite.config.js 可增加其它配置，如 plugin
  • vite 提供了编译后预览的指令 npx vite preview

以上就是 vite 编译资源 的介绍，更多无关 前端 、 工程化 的内容能够参考我其它的博文，继续更新中~

退出移动版