该文介绍vite此基础
一、简述
vite是一类构筑辅助工具，意在为当代 Web 工程项目提供更多更慢、更简化的合作开发新体验。它由三个主要就部份共同组成：
两个合作开发伺服器，在原生植物 ES 组件上提供更多多样的机能进一步增强，比如非常快的热组件替换 (HMR)。将您的标识符与Rollup绑定在一同的构筑指示，预实用性为输入度强化的动态金融资产用作制造。vite 结构设计的大背景：
他们采用 JavaScript 合作开发的辅助工具须要极短天数就可以开启合作开发伺服器，即使采用 HMR，文档修正后的效用也须要几秒就可以在插件中充分反映出，而 vite 是来化解那些难题的
二、特征
全速的服务工程项目开启 采用原生植物 ESM 文档，无须装箱!
⚡️ 高性能加速的热空载 不论插件大小不一怎样，都是毁灭者快的组件热空载（HMR）
️ 多样的机能 对 TypeScript、JSX、CSS 等全力支持照相狸尾豆。
强化的构筑 可选 “页应用领域” 或 “库” 商业模式的预实用性 Rollup 构筑
通用型的插件 在合作开发和构筑间共享资源 Rollup-superset 插件接口。
全然风格化的 API 灵巧的 API 和完备 TypeScript 类别。
vite 一类新型前端构筑辅助工具，能够显著提升前端合作开发新体验 它主要由两部份共同组成：
合作开发环境：
两个合作开发伺服器，它基于 原生植物 ES 组件 提供更多了 多样的内建机能，如速度快到惊人的 组件热更新（HMR）
制造环境：
一套构筑指令，它采用 Rollup 装箱你的标识符，并且它是预实用性的，可输入用作制造环境的度强化过的动态资源
简单说是： 在合作开发期，它是利用浏览的 Native ES Modules 特性来导入并且组织标识符,制造环境中则是利用 Rollup 作为装箱辅助工具
三、安装
Vite 须要 Node.js 版本 >= 12.0.0 npm init vite@latest 采用 NPM $ npminit vite-app <project-name> $ cd <project-name> $npm install $ npm run dev四、css 预处理
对 css 预处理，Vite 提供更多了照相全力支持，他们只要安装对应的预处理依赖，无须实用性，即可进行采用：
# .scss and .sass npm install -D sass # .less npm install -D less # .styl and .stylus npm install-D stylus五、原生植物 es 和普通 js 脚本对比
es module 默认采用严格商业模式
es module 有自己的作用域，采用 var 并不会创建全局变量
export 和 import 关键字仅可在 es module 中采用
es module 只会被插件解析并执行一次，普通 js 脚本每次引入都会解析执行
es module 有跨域限制
他们都知道，js 的加载解析默认是会阻塞插件的，因此 script 标签一般都放在页面底部；但是他们可以给 script 加上 defer 来让 js 并发加载执行：
JS 加载顺序
他们发现原生植物 ES 组件和加上 defer 属性的效用是一样的；vite 利用了插件对原生植物 ES 组件的全力支持，跳过装箱（no bundle）过程，将 ES 组件解析编译后直接提供更多给插件；只在必要请求时进行标识符转换，这样自然就节省了费时费力的装箱天数。
比如他们在请求首页 home.vue 组件时，只有在插件请求 home.vue 才将 vue 文档的 template 等解析编译，解析成插件可以执行的 js 返回。
插件对type=”module”这个新特性的全力支持情况：
六、加入TS
vite可直接导入.ts 文档，通过<script lang=”ts”>采用
<script lang=“ts”> import { defineComponent } from vue interface People { age: number; name: string; } export default defineComponent({ setup() { conststate = ref<People[]>([]); setTimeout(() => { state.value.push({ age: 18, name: “冥想” }); }, 1000); }, }); </script>ts版本指定，package.json
{ “devDependencies”: { “typescript”: “^4.2.0”} }七、vite 环境变量
很多情况下他们须要对装箱的变量根据环境进行区分，比如请求的域名等，和 vue-cli 一样，vite 也可以区分装箱环境，不过它的变量比较特殊；他们知道它并不是通过 web
import.meta.env.MODE：运行商业模式，通过–mode 来设置
import.meta.env.BASE_URL：部署的公共此基础路径，由 config 文档中的 base 确定
import.meta.env.PROD：boolean 值，是否运行在制造环境
import.meta.env.DEV：boolean 值，是否运行在合作开发环境 (永远与 import.meta.env.PROD 相反)
Vite 全力支持 dotenv，可以从工程项目根目录的文档加载额外的环境变量：
.env # 所有环境都加载 .env.test # 测试环境 .env.prod # 正式环境加载的变量也会通过 import.meta.env 暴露给客户端标识符，不过为了防止变量泄露，只有 VITE_为前缀的变量才会暴露
这里引入两个商业模式的概念，默认情况下 serve 指示运行合作开发商业模式（development），而 build 指示会运行制造商业模式（production），但是他们可以通过 env 文档定义自己须要的商业模式；可以通过–mode 选项覆盖指示采用的默认商业模式
比如他们工程项目在测试和正式环境之外可能还会设置两个预发环境，将一些线上的数据拷贝过来以便模拟真实场景，他们就可以定义两个 dev 商业模式：
vite build –mode dev他们可以将用到的环境实用性放入.env.dev 文档：
加载的变量也会通过 import.meta.env 暴露给客户端标识符，不过为了防止变量泄露，只有 VITE_为前缀的变量才会暴露；
这里引入两个商业模式的概念，默认情况下 serve 指示运行合作开发商业模式（development），而 build 指示会运行制造商业模式（production），但是他们可以通过 env 文档定义自己须要的商业模式；可以通过–mode 选项覆盖指示采用的默认商业模式
比如他们工程项目在测试和正式环境之外可能还会设置两个预发环境，将一些线上的数据拷贝过来以便模拟真实场景，他们就可以定义两个 dev 商业模式：
vite build –mode dev他们可以将用到的环境实用性放入.env.dev 文档：
# .env.staging # 自定义装箱环境 VITE_DEFINE_ENV = production # public path VITE_PUBLIC_PATH = / # 后台此基础api地址 比如：https://gray-admin-kf.cloud.kemai.cn， 可以设置多个后台api接口 VITE_APP_BASE_API = https://gray-admin-kf.cloud.kemai.cn # base path 装箱路径 VITE_APP_BASE_PATH = /八、工程项目实用性
工程项目根目录创建vite.config.js，可以对vite工程项目进行深度实用性。
定义别名
const path = require(“path”);module.exports = { alias: { // 路径映射必须以/开头和结尾 “/common/”: path.resolve(__dirname, “src/common”), }, };采用
import Comp from “/common/table.vue”; 复制标识符
