vite初步

简单使用

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script type="module" src="./main.js"></script>
</body>
</html>

main.js:

import {count} from './couter.js';
import _ from 'lodash'

console.log("count", count)
console.log("_", _)

couter.js:

export const count = 0 ;

添加vite:

# 创建vite项目
yarn init -y
# 添加lodash和vite
yarn add lodash
yarn add vite -D

package.json:

{
  "name": "test-vite",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "vite"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  },
  "devDependencies": {
    "vite": "^4.0.3"
  }
}

运行 ： yarn run dev
image-1672581899286
访问网页：
image-1672581929246

观察编译后的main.js:

import {count} from '/couter.js';
import __vite__cjsImport1_lodash from "/node_modules/.vite/deps/lodash.js?v=f5b0427b"; const _ = __vite__cjsImport1_lodash.__esModule ? __vite__cjsImport1_lodash.default : __vite__cjsImport1_lodash

console.log("count", count)
console.log("_", _)

vite配置文件

vite.config.js

拆分配置文件：

import {defineConfig} from "vite";
import viteBaseConfig from './env.base.js'
import viteDevConfig from './env.dev.js'
import viteProdConfig from './env.prod.js'

const envResolver = {
  "build": () => {
    console.log("编译")
    return {...viteBaseConfig, ...viteDevConfig}
  },
  "serve": () => {
    console.log("运行")
    return Object.assign({}, viteBaseConfig, viteProdConfig)
  }
}

export default defineConfig(({command}) => {
  return envResolver[command]();
})

简单实现空的配置文件 env.base.js:

import {defineConfig} from "vite";

export default defineConfig({});

配置文件详解

vite config

  • envPrefix: 默认VITE_ , 配置注入到import.meta.env中的环境变量前缀
  • css 对css的行为进行配置
    • modules 对css模块化的默认行为进行覆盖
      • localsConvention 修改生成的配置对象key的展示形式(驼峰或者hash)
      • scopeBehaviour 配置当前的模块化行为是模块化还是全局化
      • generateScopedName 默认 [name]_[local]_[hash:5],详见interpolatename
      • hashPrefix 生成hash会根据你的类型和一些其他的字符串生成hash
      • globalModulePaths 不参与css模块化的路径
    • preprocessorOptions 配置预处理器的全局参数(key就是各种不同的预处理语言)
      • less 安装yarn add less, 查看编译器版本npx lessc -v,用法
        • math 配置为always，允许使用数学函数
        • globalVars 配置全局变量,不在需要频繁导入全局变量
      • scss 安装yarn add scss
    • devSourcemap 启用sourcemap,方便定位问题
    • postcss 保证css特性在各个版本的浏览器上效果一致,类似于js中的babel