课程名称: Vite 从入门到精通,玩转新时代前端构建法则
课程章节: 3-9 Vite 配置项一览
课程讲师: Jokcy
课程内容:
常规配置项:
root
index.html所存在的位置,一般来说就是项目的位置
base
用来请求其它资源时前面的前置,默认 ./
mode
用来配置环境,在使用命令行启动项目时,可以使用
--mode [环境名]
重写环境,如:yarn dev --mode test
define
用来做全局的替换
plugins
需要用到的插件数组
publicDir
静态资源的存放目录,默认 public
cacheDir
在开发时产生一些 缓存资源 所存放的目录,默认 “nome_modules/.vite”
resolve.alias
对文件路径,进行映射
resolve.dedupe
如果项目中安装了两份名字一样的依赖,可以去声明最终引入那个版本
resolve.conditions
根据不同的场景,配置不同引入的文件,通常用于有多中引入方式时配置不同引入的地址,如:
{ "exports": { ".": { "import": "./index.esm.js", "require": "./index.cjs.js" } } }
resolve.mainFields
指定
package.json
文件中main
或module
关键字去读这个文件
resolve.extensions
配置文件扩展名。
在 导入一个文件时,通常想省略文件的扩展名,这时可以通过这个自动配置。
注意:顺序越往前优先级越高,如:[’.mjs’, ‘.js’, ‘.ts’, ‘.jsx’, ‘.tsx’, ‘.json’]
它会优先找 .mjs 后缀的文件,没有再找 .js 后缀的文件,依次往下
css.modules
配置 CSS modules 的行为。选项将被传递给 postcss-modules。
css.postcss
给 postcss 配置(格式同
postcss.config.js
)
css.preprocessorOptions
配置 CSS 预处理器的选项
json.namedExports
是否支持从
.json
文件中进行按名导入,如:import { test } from "../app.json"
引入 json 的时候可以只引入 json 中某个字段。
这个配置就是可以关闭掉引入 json 中的某个字段
json.stringify
开启后,导入的 JSON 会被转换为
export default JSON.parse("...")
。用于JSON文件较大时。
使用这个后
json.namedExports
就不能用了
esbuild
传给
esbuild
的配置项,esbuild
支持那些配置你都可以传
assetsInclude
如果需要有其它不同的文件类型,比如 import 一个 txt 的文件,你就可以在这个配置里面维护,
告诉 vite 我们 import 一个 txt 的文件 的时候,也是一个静态资源,后续打包会存放 assets 目录下
logLevel
需要打印日志的级别,默认
info
那么所有的日志都会打印出来
clearScreen
重新编译的时候,会把之前终端中打印的信息清除掉,不需要清除的话可以关掉
envDir
配置各种
.env
文件的存放目录,默认在根目录下
开发服务器选项:
server.host
配置域名的,默认
127.0.0.1
.如果希望通过 ip 访问,设置为
0.0.0.0
或者true
server.port
配置启动的端口,默认 3000
server.strictPort
检查端口是否被占用,默认被占用端口号会自动向上+1,直到早点空的端口为止。
设置为 true 就不会默认 +1,端口被占用会报错
server.https
配置https 的启动方式,需要提供证书相关的内容
server.open
启动服务器是否要自动打开对应的页面
server.proxy
配置请求的代理
server.cors
跨域的配置
server.force
对于依赖的预构建,设置为
true
强制使依赖预构建。
server.hmr
关于 hmr 的配置
server.watch
监听文件的相关配置,使用的是 chokidar 的文件系统监听器选项
server.middlewareMode
是使用 ‘ssr’ 还是 ‘html’
'ssr'
将禁用 Vite 自身的 HTML 服务逻辑,因此你应该手动为index.html
提供服务。
'html'
将启用 Vite 自身的 HTML 服务逻辑。默认
server.fs.strict
限制这个项目不会去读 项目更目录外的文件
server.fs.allow
文件资源的 root 设置
构建选项:
build.target
构建的目标,就是运行到浏览器兼容的目标
build.polyfillModulePreload
是否动态引入 polyfill,需要引入兼容性相关的文件,可以配置这个
build.outDir
指定输出路径(相对于 项目根目录).
build.assetsDir
静态资源所存放的路径
build.assetsInlineLimit
配置图片编译 base64 时的大小,大于以文件的形式引入,小于会直接编译成base64
build.cssCodeSplit
css 文件进行拆分。
如果禁用,整个项目中的所有 CSS 将被提取到一个 CSS 文件中。
build.sourcemap
是否使用 source map
build.rollupOptions
直接把一些 options(配置)传给 rollup
build.commonjsOptions
rollup 的 commonjs 插件的配置
build.dynamicImportVarsOptions
这个 @rollup/plugin-dynamic-import-vars 插件的配置
build.lib
导出一个库模式,而不是一个应用的模式
build.manifest
生成一个 manifest.json 的文件
build.minify
是否使用 minify
build.terserOptions
传递 terser 相关的配置
build.write
设置为 false 就不会把文件写入磁盘
build.emptyOutDir
在构建的时候是否 先把 OutDir 给清空,再把新构建的文件放进去
build.brotliSize
计算文件压缩之后大小的报告
build.chunkSizeWarningLimit
某个文件超过了 某个大小,会给一个提醒,默认 500 kbs
build.watch
是否监听文件变化
依赖优化选项:
optimizeDeps.entries
Vite 会抓取你的 index.html 来检测需要预构建的依赖项
optimizeDeps.exclude
optimizeDeps.include
optimizeDeps.keepNames
es6 的配置项,就是打包器有时需要重命名符号以避免冲突, 设置此项为
true
可以在函数和类上保留name
属性。就是你的函数名就不会编译了,防止命名的冲突
SSR 选项
…
课程收获:
了解 vite中的配置