前言
我相信大家和我一样，在项目开发时，喜欢使用一些工具，来进行代码标记、预处理、代码检查工具和其他有助于我们编写更好代码的工具。不过，有些工具也会让我们感到很繁琐，例如配置像 Webpack 和 Babel 这样的复杂构建工具，我们貌似一直在学习，在探索，但还是没找到更好的方法，让Webpack 和 Babel配置起来更容易一点。
这些工具虽然功能很强大，Webpack 通过 loader 转换 JavaScript 代码后再使用 Babel 进行 ES6+ 转 ES5 的处理，但他们是我使用过的最难用的工具之一。我相信肯定有人不同意我的这一观点，觉得用的很得心应手。但我想有这种感觉的肯定不止我一个。
Vite配置更简单
下面我分享一个 Nuxt 项目的 Webpack 配置示例:
/* nuxt.config.js */
module.exports = {
/*
** You can extend webpack config here
*/
extend(config, { isDev, isClient, loaders: { vue } }) {
/**
* Transpile All Node Modules
*/
const jsRule = config.module.rules.find((rule) => rule.test.test('.js'));
// don't transpile babel helpers and core-js
jsRule.exclude = /(core-js|babel)/;
const babelOptions = jsRule.use[0].options;
if (isClient) {
// By default, babel will assume all modules are ES modules. This would
// lead babel to inject ES imports even in commonjs files.
// Source Type unambiguous forces babel to check each file individually
// and decide whether it is commonjs or an ES module.
babelOptions.sourceType = 'unambiguous';
}
/**
* Allow vue-loader to transform assets in `data-srcset` and `data-src`
* as well as `srcset` and `src`.
*
* @see https://dev.to/ignore_you/minify-generate-webp-and-lazyload-images-in-your-vue-nuxt-application-1ilm
*/
if (isClient) {
vue.transformAssetUrls.img = ['data-src', 'src'];
vue.transformAssetUrls.source = ['data-srcset', 'srcset'];
}
/**
* Allow Inline SVGs
*
* Nuxt has a single rule for all image types that uses `file-loader`.
* This rule says "For SVG images with the inline parameter,
* use `vue-svg-loader` instead."
*
* @see https://vue-svg-loader.js.org/faq.html#how-to-use-both-inline-and-external-svgs
*/
const svgRule = config.module.rules.find((rule) =>
rule.test.test('.svg')
);
svgRule.test = /\.(png|jpe?g|gif|webp)$/;
config.module.rules.push({
test: /\.svg$/,
oneOf: [
{
resourceQuery: /inline/,
use: [
// babel loader is run after the svg files are transpiled into vue
// components (webpack runs loaders bottom-to-top)
{
loader: 'babel-loader',
options: babelOptions,
},
{
loader: 'vue-svg-loader',
options: {
svgo: false,
},
},
],
},
{
loader: 'file-loader',
options: {
esModule: false,
name: 'assets/[name].[hash:8].[ext]',
},
},
],
});
/**
* Run ESLint on save
*/
if (isDev && isClient) {
// eslint-disable-next-line global-require
const ESLintPlugin = require('eslint-webpack-plugin');
config.plugins.push(
new ESLintPlugin({
extensions: ['js', 'vue'],
})
);
}
},
},
};
是不是很长很长，看起来也很复杂，说实话，我都不想放在这，因为它占用了很大的篇幅。
但是信不信由你，这是一个相对简单的配置。但是，当出现问题时，试图弄清楚为什么以及如何解决它是非常繁琐的。
现在我们再来看看上面那个“简单”的 Webpack 配置，使用Vite就只有一行配置来加载插件以内联SVG，就这样简单的配置实现相同的功能。
/* nuxt.config.js */
import svgLoader from 'vite-svg-loader';
export default defineNuxtConfig({
vite: {
plugins: [svgLoader({ svgo: false })],
},
});
与 Webpack 相比，Vite 非常易于使用。作为一个已经成熟的工具，它开箱即用地处理了我们开发中的大部分事情。使我们的配置文件很小很小。在许多情况下，它仅用于加载帮助 Vite 理解如何处理诸如 Vue 单文件组件或内联 SVG 之类的插件。例如这几个简单的副项目中，根本没有配置文件！
为什么我喜欢Vite
这就是为什么我对 Vite（发音为“veet”，法语中的“快速”）非常喜欢的原因。它是一个现代的开发环境和构建工具，可以完全取代 Webpack。它可以实现，比如它如何利用浏览器原生JavaScript 模块来支持依赖项预捆绑和热模块替换，或者它最初创建是以加速 Vue，但现在它已转换为与框架无关的工具，并且在短短两年内就已经增长到每周超过 300 万次下载。真诚的希望你去看看 Vite 的功能页面。
我想说的是，我认为Vite就是最好的工具，它对我的前端开发产生了很大的影响，几行代码就解决了复杂的构建工具配置，也让我爱上了前端开发：
- Vite利用了现代浏览器的ES模块支持和开发服务器技术，能够实现超快的热重载和构建速度，从而提高开发效率。
- 灵活的插件机制：Vite通过提供一系列易于扩展的API和插件机制，使得开发者可以自由地扩展和定制构建过程，从而实现更加灵活的构建流程。
- 支持多种模块化规范：Vite不仅支持ES模块化规范，还支持CommonJS和AMD等其他模块化规范，使得开发者可以在同一个项目中混用不同的模块化规范。
- 高质量的插件生态：Vite的插件生态非常丰富，涵盖了从CSS预处理器到自动化部署等各种方面，可以帮助开发者快速实现各种功能。
其实Vite 只关心入口文件——index.html位于你应用程序根目录的文件。从那里加载的任何 CSS 或 JS 文件都将由 Vite 处理。
- 想使用 Sass 吗？使用 npm 安装 Sass，Vite 将自动处理您链接到的任何 Sass 文件。
- PostCSS 怎么样？没问题！只需添加一个 PostCSS 配置文件，Vite 就会搞定。
- 需要从 JSON 文件加载一些信息？可以做！Vite 允许您直接将其导入到您的 JS 文件中。
- TypeScript？你说对了！只需使用
*.ts扩展，Vue 将为您处理一切。
要是使用 Webpack 和 Babel 在项目中来完成所有这些事情，对于配置、插件和维护来说，简直是噩梦。
Vite 之所以伟大，有很多技术原因。但对我来说，它解决了前端开发中最痛苦的部分。归根结底，它简单并且高效。只需很少的配置，就能完成我想要的一切。简单来说就是加载文件，根据需要对其进行处理，然后让我就只用安心的编写代码了。
真的是太感谢 Vite 的出现了！
我的更多前端资讯
欢迎大家技术交流 资料分享 摸鱼 求助皆可 —链接
