vite及相关插件

故及
254 阅读9分钟

vite的依赖预构建解决了哪些问题？

  1. 不同的的第三方包会有不同得到导出格式（它会通过依赖调用第三方包统一将文件转换为esmodule规范)
  2. 对路径的处理上可以直接使用.vite/deps,方便路径重写
  3. 网络多包传输的性能问题

vite.config的语法提示处理

defineConfig 函数提供了一个灵活的方式来配置 Vite 项目，你可以在这里设置几乎所有的 Vite 选项。这个配置对象会传递给 Vite 的核心功能和插件，以控制项目的构建和开发行为。

import { defineConfig } from "vite";

/**@type import{"vite"}.UserConfig */
export default defineConfig({
    
})

关于环境处理

  • vite.config.ts
import { ConfigEnv, defineConfig, UserConfig } from "vite";
import viteProdConfig from "./vite.prod.config" // 生产配置
import viteBaseConfig from "./vite.base.config" // 公共配置
import viteDevConfig from "./vite.dev.config" // 开发配置

//  策略模式
const envResolver = {
    "production": ()=>({...viteBaseConfig,...viteProdConfig}),
    "development": ()=>Object.assign({},viteBaseConfig,viteDevConfig)
}

/**@type import{"vite"}.UserConfig */
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
    return envResolver[mode]();
})

vite环境变量配置

vite的环境变量提供dotenv这个第三方库，dotenv会自动读取.env文件，并解析这个文件中的对应环境变量 并将其注入到process对象下

知识点: vite在读取vite.config.js的时候会率先解析文件的语法，如果发现是esmodule规范会将你的esmodule规范进行替换变成commonjs规范

  • 这里引用process提示报错的解决方案
  • 安装 npm i --save-dev @types/node

现在配置环境变量

  • 在根目录新建一个.env文件
VITE_APP_KEY = 110
  • vite还提供了loadEnv来手动确认env文件
    • .env : 全局环境变量
    • .env.development : 开发环境变量 (默认vite将取名为 development)
    • .env.production: 生产环境变量 (默认vite将取名为 production)
  • process.cwd() 方法：返回当前node进程的工作目录
  • .env文件中的配置需要以VITE_开头

开发服务器搭建

初始化node

  • npm init -y

安装Koa

Koa 是一个开源的、使用 JavaScript 或 TypeScript 编写的 Web 框架，它旨在成为 Node.js 的一个小型、高性能及模块化的 Web 应用开发解决方案。Koa 由 TJ Holowaychuk 在 2013 年创建，现在由一个活跃的社区维护。

命令 npm install koa -D

新建入口文件 初始化web服务器

  • main.js
const Koa = require('koa');

const app = new Koa();

// 中间件
app.use((context) => {
    context.response.body = 'hello word!'
})

app.listen(5111,()=>{
    console.log("vite dev serve listen on 5111");
})

访问：http://localhost:5111/

响应主html页面

  • 新建一个html页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite开发服务器</title>
</head>
<body>
    <h1>hello Vite</h1>
    <script type="module" src="./src/index.js"></script>
</body> 
</html>
  • 在中间件中响应该网页
const Koa = require('koa');

// 导入文件模块
const fs = require('fs')
// 导入路径模块
const path = require('path');
const { isUtf8 } = require('buffer');

const app = new Koa();

// 中间件
app.use(async (context) => {
    if( context.request.url == '/'){
        // 读取 index.html 页面
        const indexHtml = await fs.promises.readFile(path.resolve(__dirname,'./index.html'),isUtf8)
        // 设置文件响应类型
        context.response.set("Content-Type","text/html")
        // 响应内容
        context.response.body = indexHtml
    }
})

app.listen(5111,()=>{
    console.log("vite dev serve listen on 5111");
})

再次访问 http://localhost:5111/ 获取html文件内容

  • 最后解析js文件
const Koa = require('koa');

// 导入文件模块
const fs = require('fs')
// 导入路径模块
const path = require('path');
const { isUtf8 } = require('buffer');

const app = new Koa();

// 中间件
app.use(async (context) => {
    if( context.request.url == '/'){
        // 读取 index.html 页面
        const indexHtml = await fs.promises.readFile(path.resolve(__dirname,'./index.html'),isUtf8)
        // 设置文件响应类型
        context.response.set("Content-Type","text/html")
        // 响应内容
        context.response.body = indexHtml
    }
    // 解析js
    if( context.request.url == '/src/index.js'){
        // 读取 index.html 页面
        const mainJs = await fs.promises.readFile(path.resolve(__dirname,'./src/index.js'),isUtf8)
        // 设置文件响应类型
        context.response.set("Content-Type","text/javascript")
        // 响应内容
        context.response.body = mainJs
    }
})
app.listen(5111,()=>{
    console.log("vite dev serve listen on 5111");
})

vite.config.js

配置文件详解

CSS配置

modulles 篇

interface CSSModulesOptions {
  getJSON?: (
    cssFileName: string,
    json: Record<string, string>,
    outputFileName: string,
  ) => void
  scopeBehaviour?: 'global' | 'local'
  globalModulePaths?: RegExp[]
  exportGlobals?: boolean
  generateScopedName?:
    | string
    | ((name: string, filename: string, css: string) => string)
  hashPrefix?: string
  /**
   * default: undefined
   */
  localsConvention?:
    | 'camelCase'
    | 'camelCaseOnly'
    | 'dashes'
    | 'dashesOnly'
    | ((
        originalClassName: string,
        generatedClassName: string,
        inputFile: string,
      ) => string)
}

modulles是对css模块化的默认行为进行覆盖

  • localsConvention: 修改生成的配置对象的key的展示形式（驼峰还是中划线）
    • camelCase : 驼峰
    • camelCaseOnly :只要驼峰
    • dashes:中划线
    • dashesCaseOnly:只要中划线
  • scopeBehaviour： 配置当前的模块化行为是模块化还是全局化
    • global 全局
    • local 模块化
  • generateScopedName： 生成的类名的规则（可以配置为函数，也可以配置成字符串规则）
  • globalModulePaths:[] 配置不参与到css模块化的路径
modules:{
            localsConvention:"camelCaseOnly",
            scopeBehaviour:"local"
        },

proprocessorOptions篇

主要是用来配置css预处理器的一些全局参数

preprocessorOptions:{
    less: {
        Math:"always",
        globalVars: { //全局变量
            mainColor:"red"
        }
    }
}

devSourcemap

开启css的文件索引（sourceMap)

参数: true|false

集成postcss

postcss css版本控制 与 babel 功能类似

  1. 安装依赖 npm i postcss-preset-env:支持css变量和一些未来css语法 自动补全
  2. vite中的配置方式
    • 方式一 : vite.config.js中配置
    const postcssPresetEnv = require("postcss-preset-env")
postcss: [postcssPresetEnv] //支持css变量和一些未来css语法 自动补全
    • 方式二: 在根目录新建一个postcss.config.ts文件
    const postcssPresetEnv = require("postcss-preset-env")
module.exports = {
  plugins: {
    autoprefixer: {}, //自动添加浏览器厂商前缀
    postcssPresetEnv
  }
};

静态资源配置与别名配置

vite对静态资源基本上是开箱即用的

  • 配置别名
  // 设置别名
  resolve: {
      alias: {
          "@": path.resolve(__dirname,"./src"),
          "@assets": path.resolve(__dirname,"./src/assets")
      }
  }

构建策略配置

// 构建策略
 build: {
     rollupOptions: { // 配置rollup的一些构建策略
         output: { // 控制输出
             // 在rollup里面，hash代表将文件名和文件内容进行组合得来的结果
             assetFileNames: "[hash].[name].[ext]"
         },
     },
     assetsInlineLimit: 4096000, // 4000kb
     outDir: "dist", // 配置输出目录
     assetsDir: "static", // 配置输出目录中的静态资源目录
     emptyOutDir: true, // 在构建新输出文件时 清除原输出目录中的所有文件
 }

插件配置

vite-aliases

vite-aliases可以帮助我们自动生成别名: 检测你当前目录下包括src在内的所有文件夹，并帮助我们生成别名

import { ViteAliases } from "vite-aliases";
// 配置插件
plugins: [
    ViteAliases({
        prefix: '@'
    })
]

vite-plugin-html

  • 依赖安装 npm i vite-plugin-html
  • 在vite.config.ts文件中 导入
<title><%= title =%></title> //EJS语法

import {createHtmlPlugin} from "vite-plugin-html"
// 配置插件
    plugins: [
        createHtmlPlugin({
            inject:{
                data:{
                    title: "主页"
                }
            }
        })
    ]

vite-plugin-mock

  • 依赖安装 npm i vite-plugin-mock mockjs

ESLint插件

简介

ESLint 是一种用于识别和报告 ECMAScript/JavaScript 代码中发现的模式的工具，目的是使代码更加一致并避免错误。

ESLint 是完全可插入的。每条规则都是一个插件，您可以在运行时添加更多插件。您还可以添加社区插件、配置和解析器来扩展 ESLint 的功能。

条件 [版本为v9.7.0]

要使用 ESLint，您必须安装Node.js（^18.18.0、^20.9.0或>=21.1.0）并启用 SSL 支持。（如果您使用的是官方 Node.js 发行版，则 SSL 始终是内置的。）

ESLint的优点

  • 统一团队规范
  • 统一语法，毕竟es版本已经不少了（var/let...)
  • 减少git不必要的提交（如果文件格式不一样，也会被git提交的）
  • 避免低级错误
  • 在编译时检查语法，而不是等js引擎运行时才检查

配置文件详解 eslintc.js

  • eslint 加载配置文件的优先级是:js>yaml>json

env节点

// 声明运行环境
"env": {
    "browser": true,
    "commonjs": true,
    "es2021": true
}

  • 由于ESLint的各种规范中，一般都不允许使用未在页面内声明的成员变量

  • 而开发中经常会用到一些运行环境自带的api，如：

    • 浏览器中的window/document等
    • nodejs中__dirname等
    • es2021中WeakRef等

  • 所以要告诉eslint，当前代码是运行在哪些环境中，这样检查时就不会报错了

globals节点

"globals": {
    "_":true, // 可以读取，可以修改
    "$":false // 可以读取，不能修改
},
  • 也可以使用globals节点来手动配置全局成员
  • 注意: 这个节点需要手动添加，默认是没有的

extend节点

"extends": [
    "standard"
],
  • ESLint检查时用哪些规范呢？ 通过这个节点可以配置使用 内置规范还有第三方规范
  • 这里配置的是 使用 第三方下载的 eslint-config-standard规范
  • 注意: 配置extends时，可以省略eslint-config-,直接写成standard

parserOptions 节点

"parserOptions": {
    "ecmaVersion": 12
},
  • ESLint 解析器 解析代码时，可以指定 用哪个js的版本
  • 注意： 这里是指定 检查时按照哪个js版本语法检查，但是这里不包含 全局变量
  • 全局变量 需要通过 前面的 env节点配置

rules节点

"rules": {
}
  • 两个用法
    • 不使用extend节点 配置 整套的规范 ，而是在rules节点中直接配置
    • 使用extend节点配置 整套的规范，在rules节点中修改部分的规范

Prettier

Prettier 是一个流行的代码格式化工具，它用于自动格式化代码，以确保代码的一致性和可读性。Prettier 可以处理多种编程语言的代码，包括 JavaScript、TypeScript、CSS、SCSS、HTML、Vue、React 等。

以下是 Prettier 的一些关键特性：

  1. 自动格式化：Prettier 可以自动调整代码的格式，使其符合预定义的样式规则。
  2. 一致性：无论谁编写代码或何时编写，Prettier 都能确保代码的一致性。
  3. 易于集成：Prettier 可以轻松集成到大多数编辑器和 IDE 中，如 Visual Studio Code、Sublime Text、Atom 等。
  4. 配置灵活：Prettier 允许你通过配置文件（如 .prettierrc）来自定义格式化规则。
  5. 插件系统：Prettier 支持插件，允许你扩展其功能，例如支持新的文件类型或语言。
  6. 忽略文件：你可以在项目中使用 .prettierignore 文件来指定 Prettier 忽略格式化的文件或目录。
  7. 命令行工具：Prettier 提供了一个命令行工具，允许你从命令行直接运行代码格式化。
  8. 编辑器插件：许多流行的编辑器和 IDE 提供了 Prettier 插件，使得在编辑器中格式化代码变得简单。
  9. 代码审查：Prettier 可以集成到代码审查流程中，确保所有提交的代码都符合格式化规范。
  10. 性能：Prettier 专注于性能，能够快速格式化大型代码库。

使用 Prettier 可以帮助开发者节省时间，减少关于代码格式的争论，并确保代码库的整洁和一致性。它通常被用作团队项目中的代码格式化标准

集成ESLint|Prettier

  1. 安装依赖

    pnpm install eslint prettier --save-dev

  2. 安装 ESLint 插件的Prettier插件 pnpm install eslint-plugin-prettier --save-dev

  3. 配置ESLint配置文件

    module.exports = {
  extends: ['eslint:recommended', 'plugin:prettier/recommended'],
  plugins: ['prettier'],
  rules: {
    // 'no-unused-vars': 'warn', // 警告未使用变量
    // 'no-mixed-spaces-and-tabs': 'off', // 关闭对混合使用空格和制表符的检查
    // 'no-trailing-spaces': 'off', // 关闭对行尾多余空格的检查
    'prettier/prettier': 'error', // 这个规则会告诉 ESLint 使用 Prettier 的规则，并将任何不符合 Prettier 规则的问题视为错误。
  },
};

  4. 配置 Prettier

 {
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
 }
  1. 添加脚本到 package.json
  "scripts": {
    "lint": "eslint .",
    "format": "prettier --write ."
  },
avatar
文章
阅读
粉丝