前言
Vite 出來好一段時間了,最開始支援 Vue,而現在已經不受框架限制了。而 Vite 解決的是對於專案每次啟動與打包構建等待時間長的問題,Vite 就是解決了該問題,提高開發效率與體驗,本文作個簡單的學習記錄。
初始化
通過 Vite 官方命令列選項直接指定專案名稱和想要使用的模板。例如,要構建一個 Vite + TypeScript 專案
# npm 6.x
npm init @vitejs/app vite-react-ts-antd-starter --template react-ts
# npm 7+, 需要額外的雙橫線:
npm init @vitejs/app vite-react-ts-antd-starter -- --template react-ts
建立完安裝依賴後,執行專案如圖:
配置路由
npm i react-router-dom@5.3.0
由於v6目前試用ts提示等有一些問題,避免講解複雜還是直接簡單點用v5版本,用法不變。
首先新建三個頁面檔案,在 src/pages
資料夾下新建三個頁面
// home
const Home = () => {
return <div>home page</div>
}
export default Home
// about
const About = () => {
return <div>about page</div>
}
export default About
// not found
const NotFound = () => {
return <div>404 page</div>
}
export default NotFound
在 src/config
目錄下新建檔案 routes.ts
import { lazy } from 'react'
const Home = lazy(() => import('../pages/home'))
const About = lazy(() => import('../pages/about'))
const NotFound = lazy(() => import('../pages/not_found'))
const routes = [
{
path:'/',
exact: true,
component: Home,
name:'Home'
},
{
path:'/home',
component: Home,
name:'Home'
},
{
path:'/about',
component: About,
name:'About'
},
{
path: '/404',
component: NotFound,
},
]
export default routes
新建檔案src/router.tsx
,路由檔案入口
import { Suspense } from 'react'
import { Route, Switch } from 'react-router-dom'
import routes from './config/routes'
const Router = () => {
const myRoutes = routes.map((item) => {
return <Route key={item.path} {...item} component={item.component} />
})
return (
<Suspense fallback={<div>Loading...</div>}>
<Switch>{myRoutes}</Switch>
</Suspense>
)
}
export default Router
App.tsx
import Router from './router'
// 這裡我封裝了,其實就使用react-router-dom的Link
import { Link } from './components'
function App() {
return (
<div className="App">
<Link to="/">Home Page</Link>
<Link to="/about">About Page</Link>
<Router />
</div>
)
}
export default App
進入http://localhost:3000
,此時就可以切換路由了
支援 Antd
在寫該文章的時候,antd最新版本為4.18.1,使用vite打包會有錯誤,然後回退到antd的4.17.1就可以了,具體見 https://github.com/ant-design...
npm i antd@4.17.1 @ant-design/icons
在App.tsx引入antd的按鈕元件:
import { Button } from 'antd'
// ...
<Button type="primary">按鈕</Button>
antd使用的是less,這時還需要支援Less
npm i less less-loader -D
我們還要對 antd 按需引入,安裝外掛
npm i vite-plugin-imp -D
vite.config.ts
的配置如下:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import vitePluginImp from 'vite-plugin-imp'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react(),
vitePluginImp({
optimize: true,
libList: [
{
libName: 'antd',
libDirectory: 'es',
style: (name) => `antd/es/${name}/style`
}
]
})
],
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true, // 支援內聯 JavaScript
}
}
},
})
此時檢視頁面,確實單獨引入了按鈕的樣式元件
這樣頁面就正常顯示出antd的按鈕元件了
alias 別名設定
這個同webpack配置差不多,在 vite.config.js
import path from 'path'
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
}
}
})
改一下 App.tsx 的 Link 元件引入,試驗一下
- import { Link } from './components'
+ import { Link } from '@/components'
此時編輯器會看到紅色警告:Cannot find module '@/components' or its corresponding type declarations.
,是因為我們別名沒有在 tsconfig.json 裡面配置,修改:
"compilerOptions": {
"paths":{
"@/*": ["src/*"],
},
}
eslint 與 Prettier 配置
npm i -D @typescript-eslint/parser eslint eslint-plugin-standard @typescript-eslint/parser @typescript-eslint/eslint-plugin
.eslintrc.js
檔案參考:
module.exports = {
extends: ['eslint:recommended', 'plugin:react/recommended'],
env: {
browser: true,
commonjs: true,
es6: true,
},
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
modules: true,
},
sourceType: 'module',
ecmaVersion: 6,
},
plugins: ['react', 'standard', '@typescript-eslint'],
settings: {
'import/resolver': {
node: {
extensions: ['.tsx', '.ts', '.js', '.json'],
},
alias: [['@', './src']],
},
},
rules: {
semi: 0,
indent: 0,
'react/jsx-filename-extension': 0,
'react/prop-types': 0,
'react/jsx-props-no-spreading': 0,
'jsx-a11y/click-events-have-key-events': 0,
'jsx-a11y/no-static-element-interactions': 0,
'jsx-a11y/no-noninteractive-element-interactions': 0,
'jsx-a11y/anchor-is-valid': 0,
'no-use-before-define': 0,
'no-unused-vars': 0,
'implicit-arrow-linebreak': 0,
'consistent-return': 0,
'arrow-parens': 0,
'object-curly-newline': 0,
'operator-linebreak': 0,
'import/no-extraneous-dependencies': 0,
'import/extensions': 0,
'import/no-unresolved': 0,
'import/prefer-default-export': 0,
'@typescript-eslint/ban-ts-comment': 0,
'@typescript-eslint/no-var-requires': 0,
},
}
Prettier 配置
npm i -D prettier
.prettierrc
{
"singleQuote": true,
"tabWidth": 2,
"endOfLine": "lf",
"trailingComma": "all",
"printWidth": 100,
"arrowParens": "avoid",
"semi": false,
"bracketSpacing": true
}
環境變數
新增.env
,.env.prod
檔案,當使用自定義環境時變數要以VITE
為字首
.env # 所有情況下都會載入
.env.[mode] # 只在指定模式下載入
.env
NODE_ENV=development
VITE_APP_NAME=dev-name
.env.prod
NODE_ENV=production
VITE_APP_NAME=prod-name
獲取環境變數
Vite在import.meta.env
物件上暴露環境變數。修改 App.tsx
,直接列印:
console.log('import.meta.env', import.meta.env)
重啟執行 npm run dev
TS 提示環境變數
在src目錄下新建env.d.ts
,接著按下面這樣增加 ImportMetaEnv
的定義:
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_APP_NAME: string
// 更多環境變數...
}
interface ImportMeta {
readonly env: ImportMetaEnv
}
然後 import.meta.env.VITE_APP_NAME
等這些自定義的環境變數就會有提示了
結語
現在 Vite 官方雖然支援了 React,但對於 React 生態來說完整的官方支援還有待完善,所以對於公司 webpack 專案開發環境遷移 Vite 還是持保守態度,待 Vite 繼續發展,後續再慢慢跟進和學習再做升級。
本文專案地址:vite-react-ts-antd-starter
參考文章