工具链 之 vite 简介(一)

Vite是一个面向现代浏览器的轻量级、快速的Web应用开发工具。

1. 定义与特性：

• Vite基于ECMAScript标准原生模块系统（ES Modules）实现，提供了一种全新的开发体验。
• Vite的主要特性之一是Bundleless，即在本地开发过程中去除了打包步骤，从而缩短构建时长。
• Vite支持按需加载，只在某个模块被import的时候动态地加载它，实现了真正的按需加载，减少了加载文件的体积和时长。

2. 打包构建：

Vite使用Rollup作为默认的构建工具。通过运行npm run build命令，Vite会将应用程序的源代码打包成一个或多个优化的静态文件，以便在生产环境中进行部署。
Vite的构建过程会根据需要进行代码拆分、压缩和优化，以提供最佳的性能和文件大小。

3. 环境变量：

• Vite支持在项目中使用环境变量。可以在项目的根目录下创建一个.env文件，并在其中定义所需的环境变量。
• 在代码中，可以使用import.meta.env对象来访问这些环境变量。Vite会根据当前的环境自动加载相应的环境变量文件，如.env.development、.env.production等。

4. 模式：

• Vite支持两种模式：开发模式和生产模式。在开发模式下，Vite会提供一个开发服务器，实现快速的冷启动和热重载，以便在开发过程中获得即时的反馈。
• 在生产模式下，Vite会对应用程序进行优化和打包，以提供更高的性能和更小的文件大小。

5. 兼容老浏览器：

• Vite默认情况下不支持老版本的浏览器，因为它使用了一些现代的JavaScript特性和浏览器原生模块的功能。
• 但可以通过配置文件来启用对老浏览器的支持。通过设置target选项为es2015，并使用@vitejs/plugin-legacy插件，可以将应用程序转换为兼容老浏览器的代码。

6. 静态资源处理：

• Vite支持在项目中处理各种静态资源，如图片、字体等。
• 可以在Vite的配置文件中配置别名，方便后续的图片引入，如将地址前缀直接换成@assets。

7. 集成与配置：

• Vite可以与多种前端框架和库集成，如Vue、React等。
• 可以通过修改Vite的配置文件（如vite.config.js或vite.config.ts）来定制项目的构建和开发行为。

Vite 的主要特点：

1. 极速的冷启动：Vite 避免了传统打包工具（如 Webpack）的复杂打包过程，直接利用浏览器的原生 ES Modules 特性，使得开发服务器启动迅速。

2. 按需编译：只有当你实际修改了某个模块的代码时，Vite 才会重新编译该模块及其依赖。

3. 原生 ES Modules：Vite 鼓励使用原生的 JavaScript 特性，如 ES Modules、Proxy 等，使得代码更加简洁和现代。

4. 丰富的插件生态：Vite 支持丰富的插件，可以方便地集成 Vue、React、Preact 等前端框架，以及 TypeScript、Less、Sass 等其他工具和库。

Vite 的默认配置文件（vite.config.js 或 vite.config.ts）：

// vite.config.js  
import { defineConfig } from 'vite'  
import vue from '@vitejs/plugin-vue' // 如果你在使用 Vue  
  
// https://vitejs.dev/config/  
export default defineConfig({  
  base: '/',   //基本根路径
  plugins: [vue()],    //插件在这里	，如eslint，vueJsx，qiankun等等
  resolve: {    
    alias: {    //配置路径别名在这里	
      '@': path.resolve(__dirname, './src'),  
      // 其他别名配置...  
    }  
  },  
  css: {  
    preprocessorOptions: {  
      scss: {  
        additionalData: `@import "@/styles/variables.scss";` // 导入全局 SCSS 变量  
      }  
    }  
  },  
  build: {  
    outDir: 'dist', // 输出目录  
    assetsDir: 'assets', // 静态资源目录  
    rollupOptions: {  
      input: 'index.html', // 入口文件  
      output: {  
        chunkFileNames: 'js/[name]-[hash].js', // 分块文件名格式  
        entryFileNames: 'js/[name]-[hash].js', // 入口文件名格式  
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]' // 资源文件名格式  
      }  
    }  
  },  
  server: {      //本地开发环境启动服务相关配置
    port: 3000, // 开发服务器端口  
    open: true, // 是否自动打开浏览器  
    hot: { // HMR 配置  热更新
      // HMR 配置项...  
    },
    origin: https://,
    proxy: {  //本地代理服务配置项
		'XX': {  //接口前缀名
			target: 'https://XX/XX/aa',   //对应接口服务地址
			changeOrigin: true,   //是否跨域
			rewrite: (path) => path.replace(/^\/XX/,'')  //可选
		}
	}
  }  
  // 其他配置项... 
})