vite的优势
- 上手简单
- 开发效率极高
- 社区成本低（兼容rollup插件）
- 没有复杂晦涩的配置（与webpack相比）
//webpack配置
const config = {
mode: "development",
entry: {
app: [`{commonPath.appEntry}/index.js`,"webpack-plugin-server/client"],
},
output: {
filename:"[name].[fullhash].js",
},
devtool: "inline-source-map",
module: {
rules: [
test:/\.(jsx?)$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
plugins: [require("react-refresh/babel")].filter(Boolean),
},
},
],
],
},
plugins: [
new ReactRefreshWebpackPlugin({
overlay: {sockIntegration: "wps"},
}),
new HtmlWebPackPlugins({
template: `public/index.html`,
favicon: `public/favicon.ico`
})
]
}
//vite配置
import react reactRefresh from “@vitejs/plugin-react-refresh”
export default {
plugins: [reactRefresh()],
}
- 更合理的对比是vue-cli和create-react-app
- cra需要eject
- vue-cli的configureWebpack和chainWebpack
- vite有自身的插件系统
- 生态：兼容rollup插件
vite创建Vue3项目
npm init @vitejs/app
入口文件
配置文件
（支持sfc写法不支持vue的jsx语法）
安装 @vitejs/plugin-vue-jsx插件来支持
vite创建Vue2项目
vue2没有出现在默认列表，使用underfin/vite-plugin-vue2
自己手动创建模版
第三方插件
Vite创建React项目
FastRefresh与react-hot-loader
优势
- 解决很多rhl无法解决的问题
- 速度很快
- 支持局部更新
步骤
npm init @vitejs/app
css处理
vite原生支持css，不需要做任何配置
推荐原生css veriable
vite官方集成了postcss
设置postcss.config.js
@import alias
css-modules
css-pre-processors
yarn add less
TypeScript集成
vite 支持ts语法，只编译，不校验，使用tsc --noEmit只做校验
tsc --noEmit
pakage.json文件
tsconfig.json
vue-tsc for SFC
npm i vue-tsc
pakage.json
isolatedModules
tsconfig.json
"isolatedModules":true
Exports of Non-Value Identifiers Non-Module Files References to const enum members
client types
tsconfig.json
"tyeps":["vite/client"]
Asset imports env HMR api
Vite处理静态资源文件
types
- url
- raw
- worker/worker inline
（webworker 是帮助我们来构建更高性能的一个工具，如果是计算很大，js是单线程，如果跟渲染进程放在一起，会阻塞渲染导致页面卡顿，用webworker解决这个问题）
json
Web Assembly
集成eslint&pritter
npm i eslint-config-standard eslint-plugin-import eslint-plugin-promise eslint-plugin-node —D
vscode 安装prettier .prettierrc文件
husky
vite获得环境变量
import.meta.env
build in
- Mode
- BASE_URL
- PROD
- DEV
