解決Vite-React項(xiàng)目中Js使用Jsx語(yǔ)法報(bào)錯(cuò)
本文轉(zhuǎn)載自微信公眾號(hào)「粥里有勺糖」，作者粥里有勺糖 。轉(zhuǎn)載本文請(qǐng)聯(lián)系粥里有勺糖公眾號(hào)。
背景
在做存量項(xiàng)目接入Vite測(cè)試時(shí)發(fā)現(xiàn)，存量(老)項(xiàng)目中很多是直接在js中書寫jsx語(yǔ)法，使用Vite啟動(dòng)時(shí)就會(huì)拋出一堆問(wèn)題Failed to parse source。
不嫌麻煩可以跑個(gè)腳本批量修改文件類型，這是一個(gè)解決辦法。
為了刨根知底，同時(shí)為了存量項(xiàng)目最低成本的接入Vite使用，盡力避免修改業(yè)務(wù)代碼。得尋找其它辦法解決一下。
報(bào)錯(cuò)截圖如下
復(fù)現(xiàn)問(wèn)題
初始化demo項(xiàng)目
- # npm 6.x
- npm init vite@latest my-react-app --template react-ts
- # npm 7+, extra double-dash is needed:
- npm init vite@latest my-react-app -- --template react-ts
- # yarn
- yarn create vite my-react-app --template react-ts
目錄如下
- ├── index.html
- ├── package.json
- ├── src
- | ├── App.css
- | ├── App.tsx
- | ├── favicon.svg
- | ├── index.css
- | ├── logo.svg
- | ├── main.tsx
- | └── vite-env.d.ts
- ├── tsconfig.json
- └── vite.config.ts
啟動(dòng)
- npm run dev
頁(yè)面正常，接下來(lái)將App.tsx修改為App.js
將會(huì)得到上述的報(bào)錯(cuò)
原因
- Vite在啟動(dòng)時(shí)會(huì)做依賴的預(yù)構(gòu)建[1]
- 預(yù)構(gòu)建，運(yùn)行時(shí)默認(rèn)都只會(huì)對(duì)jsx與tsx做語(yǔ)法轉(zhuǎn)換。不會(huì)對(duì)js做jsx的語(yǔ)法轉(zhuǎn)換。
解決方案
- 修改依賴預(yù)構(gòu)建的配置
- 使用babel插件@babel/plugin-transform-react-jsx，讓Vite在運(yùn)行時(shí)對(duì)js文件轉(zhuǎn)換
按照文檔描述在配置文件添加一點(diǎn)配置
- export default defineConfig({
- build:{
- rollupOptions:{
- input:[]
- }
- },
- optimizeDeps: {
- entries: [],
- },
- })
通過(guò)閱讀@vite/plugin-react的文檔[2],發(fā)現(xiàn)其支持傳入babel插件
- npm i @babel/plugin-transform-react-jsx
添加插件
- import { defineConfig } from 'vite'
- import react from '@vitejs/plugin-react'
- // https://vitejs.dev/config/
- export default defineConfig({
- plugins: [react({
- babel: {
- plugins: ['@babel/plugin-transform-react-jsx'],
- },
- })],
- })
再次啟動(dòng)驗(yàn)證,發(fā)現(xiàn)一個(gè)報(bào)錯(cuò)
原因是沒有在App.js中引入React,咱們引入一下
- import React,{ useState } from 'react'
大功告成
總結(jié)
兩種處理方案
- 文件后綴 js => jsx
- 修改依賴預(yù)構(gòu)建配置，再添加babel插件@babel/plugin-transform-react-jsx
第二種方法會(huì)一定程度影響項(xiàng)目的啟動(dòng)速度。讀者可以根據(jù)實(shí)際項(xiàng)目情況pick方案
參考資料
[1]依賴的預(yù)構(gòu)建: https://cn.vitejs.dev/guide/dep-pre-bundling.html#the-why
[2]文檔: https://github.com/vitejs/vite/tree/main/packages/plugin-react
[3]源碼地址: https://github.com/ATQQ/demos/tree/main/vite-react-js
