vite的基本使用

vite安装

1.安装

• 全局安装
  npm install vite -g
• 局部安装
  npm install vite -D
  npx vite

vite对css的处理

默认对css的加载

• 1.安装less
  npm install less -D
• 2.安装postcss
  npm install postcss -D
  还需要安装
  npm install postcss-preset-env -D

配置postcss.config.js

module.export = {
  plugins: [
    require("postcss-preset-env"),
  ]
}

vite对ts文件也是支持的

vite对vue的支持

• 安装:
  npm install vue@next -D

vite对vue提供第一优先级支持

• 1.Vue3单文件组件支持：
  @vitejs/plugin-vue
• 2.Vue3 JSX支持：
  @vitejs/plugin-vue-jsx
• 3.Vue2支持：
  underfin/vite-plugin-vue2

配置vite.config.js

const vue = require('@vitejs/plugin-vue')
//导出的是一个函数
module.exports = {
  plugins: [
    vue()
  ]
}

报错后继续安装：
npm install @vue/compiler-sfc -D

打包

npx vite build
在package.json中配置script

"serve": "vite",
"build": "vite build",
"preview": "vite preview"

vite的脚手架

支持多种语言的框架

• 安装：
  npm install @vitejs/create-app -g/-D

• 创建项目：
  create-app "name"

• 安装依赖：
  npm install

ESbuild解析

1.特点

• 超快的构建速度(极快)，并且不需要缓存
• 支持ES6和CommonJS的模块化
• 支持ES6的Tree Shaking
• 支持Go，JavaScript的API
• 支持TypeScript,JSX等语法编译
• 支持sourceMap
• 支持代码压缩
• 支持扩展其他插件

2.本身使用Go语言编写的，可以直接转化为机器码，无需经过字节码(ESbuild这么快？)

3.ESbuild可以充分利用CPU的多内核，尽可能让他们饱和运行

4.ES6的所有代码都是从零去编写的，没有借用外部的包