Page Title

> 几年前学习`webpack`时写过一篇文章，但是在几年后的今天，`webpack`也许不再适合一些大型的项目了，`vite`成为了更好的选择，有兴趣可以对别一下几年前的文章，`vite`的配置简单了许多.[传送门][1] ### 开始准备 - `mkdir vite-test` - `cd vite-test` - `npm i vite -D` 此时我们创建好了vite项目的文件夹，并且使用`npm`安装好了`vite`，目录生成了`node_modules`和`package.json`还有`package-lock.json`文件夹，`npm`项目安装完成. ### 配置vite - 在根目录中新建`index.html`和`vite.config.js`两个文件，`vite.config.js`相当于`vue-cli`创建的项目中的 `vue.config.js` - 接下来先将html配置好. #### `index.html` ``` Page Title

这是一个vite项目

``` #### `main.js` 创建一个空的`main.js`文件 #### `vite.config.js` ``` export default defineConfig({ }) // 先将vite.config.js留空 ``` #### packge.json ``` //添加启动与打包命令 "scripts": { "dev": "vite", "build": "vite build" } ``` 此时使用`npm run dev`命令运行该项目,启动成功后默认为`5173`端口，打开`http://localhost:5173/`显示html的内容，尝试修改下`index.html`自动热更新，不同于`webpack`需要配置热更新，`vite`默认开启热更新. ### css配置 `vite` 同时提供了对 `.scss`，`.sass`，`.less`，`.styl` 和 `.stylus` 文件的内置支持，只需安装相应的预处理器就可以了. ``` # .less npm install less -D # .scss and .sass npm install sass -D # .styl and .stylus npm install stylus -D ``` 选择你常用的`css`预处理器安装，根目录新建一个`css`文件，我用的是`scss`，在`main.js`中引入`scss`文件 ``` import './index.scss' ``` 此时浏览器会开始报错`Uncaught SyntaxError: Cannot use import statement outside a module`，这个错误通常出现在代码中使用了`ES6`的模块语法，但是浏览器并不支持它。要解决这个问题，可以将代码转换为`CommonJS`或其他浏览器支持的模块语法，我们需要将代码打包成浏览器可用的格式，不同于`webpack`需要添加一大堆的`babel`，在`vite.config.js`中我们只需要这样配置: ``` esm: 'babel' ``` 其实这样配置还是不行，为什么呢？因为我们在`index.html`中引入了`main.js`，而`main.js`中使用了`import`来引入`index.scss`文件，所以我们还需要在`index.html`中的`script`标签中添加`type="module"`来告诉浏览器这是一个`ES6`模块. #### PostCSS `PostCSS`是一个基于`Node.js`的`CSS`处理工具，可以用它来自动化处理`CSS`。它可以通过编写插件来扩展功能，支持使用`JavaScript`编写`CSS`，支持使用`CSS`未来的语法，如`CSS Variables`、`CSS Grid`等。`PostCSS`的主要功能是将`CSS`转换为更加兼容的`CSS`，例如自动添加浏览器前缀、压缩`CSS`等。它也可以用于优化`CSS`性能，例如减小`CSS`文件大小、合并`CSS`文件等。`PostCSS`已经成为了现代前端开发中不可或缺的工具之一，这里我介绍两个常用的`PostCSS`插件. ##### postcss-preset-env - `postcss-preset-env`是一个预设环境插件，包含高级 CSS 语法的降级、前缀补全等众多功能. ``` npm i postcss-preset-env -D ``` 在vite.config.js中配置 ``` css: { postcss: { plugins: [postcssPresetEnv()] } } ``` 随便在`index.scss`中写几个`css`样式，再查看网页的样式，你会发现，就算你没写`css`的浏览器兼容样式，`css`也会自动加上. ##### postcss-px-to-viewport - `postcss-px-to-viewport`一个对移动端不同设备进行布局适配的插件. ``` npm install postcss-px-to-viewport -D ``` 配置`vite.config.js`，将我们书写的 px 单位转为 vw 或 vh ，轻松地解决了适配问题. ``` postcss: { plugins: [postcssPresetEnv(),postcssPxToViewport({ viewportWidth: 375 })] } ``` #### scss配置 `vite`中配置`SCSS`预处理器的选项，其中`additionalData`是一个字符串，它会被添加到每个`SCSS`文件的顶部。这个字符串中使用了`@use`语法来导入一个名为`index.scss`的文件，`as *`表示将这个文件中的所有变量和函数都导入到当前文件的命名空间中。这个配置的作用是让每个`SCSS`文件都可以使用`index.scss`中定义的变量和函数，这样可以避免在每个`SCSS`文件中重复定义相同的变量和函数，提高了代码的复用性和可维护性，在一些主题配置中会经常使用到，例如更普遍的暗黑模式. ``` css:{ scss: { additionalData: @use '@/theme/index.scss' as * ; } } ``` ### vue vite中使用vue单文件，只需要安装一些相应的插件并且配置即可. 安装`@vitejs/plugin-vue` ``` npm i @vitejs/plugin-vue -D ``` ``` plugins: [vue()] ``` ### ts `vite` 仅执行 `.ts` 文件的转译工作，不会执行任何类型检查。编辑器提示报错，也不会影响正常开发和生成环境打包,这样对我们的代码规范影响很大，所以我们需要通过下面两个插件进行约束: ``` # 安装typescript依赖 npm install typescript -D # ts检查 npm install vite-plugin-checker -D ``` 在vite.config.js中配置 ``` plugins: [vue(),checker({ typescript: true })] ``` 接下来我们在根目录下创建`tsconfig.json`，同时再创建`tsconfig.base.json` `tsconfig.json`配置: ``` { "extends": "./tsconfig.base.json", // 检查规则延申文件 "compilerOptions": { // 配置引用别名 "paths": { "@/*": ["src/*"], "~/*": ["typings/*"] } }, "include": ["src", "typings", "auto-imports.d.ts"],// 检查目录 "exclude": ["node_modules", "**/dist"] // 排除检查目录 } ``` `tsconfig.base.json`按需进行配置即可 ``` { "files": [], "compilerOptions": { "target": "esnext", "module": "esnext", // 启用所有严格类型检查选项。 //启用 --strict相当于启用 --noImplicitAny, --noImplicitThis, --alwaysStrict， --strictNullChecks和 --strictFunctionTypes和--strictPropertyInitialization。 "strict": true, // 允许编译器编译JS，JSX文件 "allowJs": false, // 允许在JS文件中报错，通常与allowJS一起使用 "checkJs": false, // 允许使用jsx "jsx": "preserve", "declaration": true, //移除注解 "removeComments": true, //不可以忽略any "noImplicitAny": false, //关闭 this 类型注解提示 "noImplicitThis": true, //null/undefined不能作为其他类型的子类型： //let a: number = null; //这里会报错. "strictNullChecks": true, //生成枚举的映射代码 "preserveConstEnums": true, //根目录 //输出目录 "outDir": "./ts-out-dir", //是否输出src2.js.map文件 "sourceMap": true, //变量定义了但是未使用 "noUnusedLocals": false, //是否允许把json文件当做模块进行解析 "resolveJsonModule": true, //和noUnusedLocals一样，针对func "noUnusedParameters": false, // 模块解析策略，ts默认用node的解析策略，即相对的方式导入 "moduleResolution": "node", //允许export=导出，由import from 导入 "esModuleInterop": true, //忽略所有的声明文件（ *.d.ts）的类型检查。 "skipLibCheck": true, "baseUrl": ".", //指定默认读取的目录 //"typeRoots": ["./node_modules/@types/", "./types"], "lib": ["ES2018", "DOM"] } } ``` 这样配置完成之后，如果有`ts`的错误，将会在页面进行显示并且指出错误的行数与错误原因. ### 环境变量 `vite`的环境变量和`webpack`的配置其实大差不差，只是获取环境变量的方法有一些变化. 根目录中创建几个`.env`文件，例如`.env.dev`和`.env.bulid`文件，分别在`.env.dev`和`.env.bulid`中添加`VITE_APP_ENV = 'dev'`和`VITE_APP_ENV = 'build'`，区分开发和生成环境. 再修改`packge.json`中的`script`启动命令即可. ``` "scripts": { "dev": "vite --mode dev", "build": "vite build --mode build" } ``` 使用起来也非法的简单，只需要使用`import.meta.env.VITE_APP_ENV`即可获取到对于的环境变量参数，如果你有更多的环境需要配置，再新增所需的环境`env`文件和启动命令进行修改. ### vite配置这里是一些`vite`的配置和优化 #### resolve.alias 常用的一些例如`src`等引用别名 ``` import path from 'path' resolve: { alias: { '@': path.resolve(__dirname, './src') // 路径的别名 } } ``` #### resolve.extensions 常用的一些文件拓展名省略 ``` resolve: { extensions: ['.js', '.ts', '.json'], // 导入时省略的扩展名列表 alias: { '@': path.resolve(__dirname, './src') // 路径的别名 } } ``` #### server.host 指定服务器监听的`IP`地址。默认是为`localhost`，只会监听本地的`127.0.0.1`。开发移动端或需要通过局域网访问是，可以将`host`设置为`true`或`0.0.0.0`，这样服务器就会监听所有地址，包括局域网和公网地址。 ``` server: { host: true // or `0.0.0.0` } ``` #### server.proxy 本地`http`等请求的代码，和`webpack`基本一致 ``` proxy: { '/api': { target: 'http://192.168.1.1:9100', changeOrigin: true //rewrite: (path) => path.replace(/^\/api/, '') } } ``` 还有一些例如`server.port`指定服务器端口，`open`启动时自动打开应用不一一列举了，可以在`vite`配置文档中查看. #### base 开发或生产环境服务的公共基础路径配置 ``` base: '/home/' // 开发或生产环境服务的公共基础路径，配置后项目启动路径为`http://localhost:5173/home/` ``` #### build.outdir 打包时的文件输出目录。默认是为`dist`，可以在`dist`被占用或有统一命名规范时，进行修改. ``` build: { assetsDir: 'build' // 打包的文件的输出目录 } ``` #### build.assetsDir 打包时的指定生成静态资源的目录。默认是为`assets`，根据自身情况进行调整. ``` build: { assetsDir: 'static' // 静态资源目录 } ``` #### build.minify 对生产环境的`console`和`debugger`进行移除. ``` build: { minify: 'terser', terserOptions: { compress: { //生产环境时移除console drop_console: true, drop_debugger: true, }, }, } ``` #### build.assetsInlineLimit 将较小的图片转成`base64`，通过设置阈值对图片进行base64格式转换. ``` build: { assetsInlineLimit: 4096 // 图片大小，kb } ``` ### 结语以上就是我在使用vite时使用的一些配置，还有我学习`vite`时了解到的一些用法和插件，在一些中大型项目中，`webpack`已经比不上`vite`了，比如我司的一些项目，所有的`webpack`优化全部用上了，但是还是在启动与热更新上花的时间很长，`vite`的优点太多太多了，随便列举一个点，例如我司的中大型项目中，如果需要更换`api`环境与同时对接，我们的前端项目启动需要1-2分钟，修改`vue.config.js`后需要重启`vue`项目才能生效，而`vite`会帮你自动重启`server`服务，启动快，热更新快，这也导致了我不再关注`webpack`投入`vite`的怀抱的原因. [1]: https://www.nanbk.com/archives/149/

AI 摘要

一个简单的九宫格抽奖代码

解锁gitlab和jenkins自动化部署项目