Vite入门教程-下一代前端开发与构建工具

Posted 2023-03-26

参考技术A 直接点说，现市面上的构建工具太慢了（webpack 、 Rollup 和、 Parcel等），Vite直接利用浏览器原生的 ES模块使构建速度更快

使用 NPM:

使用 Yarn:

然后按照提示操作即可！

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

在安装了 Vite 的项目中，可以在 npm scripts 中使用 vite 可执行文件，或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：

可以指定额外的命令行选项，如 --port 或 --https。运行 npx vite --help 获得完整的命令行选项列表。

当以命令行方式运行 vite 时，Vite 会自动解析 项目根目录 下名为 vite.config.js 的文件。

最基础的配置文件是这样的：

注意：即使项目没有在 package.json 中开启 type: "module"，Vite 也支持在配置文件中使用 ESM 语法。这种情况下，配置文件会在被加载前自动进行预处理。

你可以显式地通过 --config 命令行选项指定一个配置文件（相对于 cwd 路径进行解析）

因为 Vite 本身附带 Typescript 类型，所以你可以通过 IDE 和 jsdoc 的配合来实现智能提示：

另外你可以使用 defineConfig 工具函数，这样不用 jsdoc 注解也可以获取类型提示：

Vite 也直接支持 TS 配置文件。你可以在 vite.config.ts 中使用 defineConfig 工具函数。

如果配置文件需要基于（dev/serve 或 build）命令或者不同的 模式 来决定选项，则可以选择导出这样一个函数：

需要注意的是，在 Vite 的 API 中，在开发环境下 command 的值为 serve（在 CLI 中， vite dev 和 vite serve 是 vite 的别名），而在生产环境下为 build（vite build）。

如果配置需要调用一个异步函数，也可以转而导出一个异步函数：

觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧

Vite 从入门到精通，玩转新时代前端构建法则

​

Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生 ES-Module 的前端构建工具。其本人在后来对 vue3 的宣传中对自己的新作品 Vite 赞不绝口，并表示自己 ”再也回不去 webpack 了“ 。那么 Vite 究竟有什么魅力？

这里引用一下 vite 官网首页的描述：下一代前端开发与构建工具

为什么是下一代呢？

现有的前端构建工具不够我们用吗？

Vite 是不是在重复造轮子？

下面我就用简单的逻辑解释一下 Vite 的优越性。

为什么是下一代

为了解释“下一代”这个问题，我们需要先了解一下“上一代”有什么问题。

为了了解“上一代”的问题，我们就需要弄懂“模块化”的概念。

在ES6出现之前，我们的代码模块化都是使用的社区规范

例如 node.js 中的 Common JS 规范。它并不是语言官方给出的规范，而是我们的开发者社区提供的规范，只不过用在了 node.js 当中。

再比如我们客户端的 AMD、CMD 模块化规范

ES6 出现之后，代码模块化有了语言规范，即 ES-Module

ES-Module 是伴随 ES6 出现的原生js模块化解决方案，其优越性这里先略掉。

模块化方案有很多，基于这些方案的工具也有很多。这里先放个结论：抛弃社区规范，使用语言规范成为前端模块化开发的趋势

所以，Vite 可以说是“下一代“