Vue2遷移Rsbuild詳細步驟
更新時間：2024年10月23日 08:41:29 作者：前端偉哥
Rsbuild,一個基于Rspack的高效Web構(gòu)建工具,將Rspack的強大功能與易用性相結(jié)合,是你項目搭建的不二之選,Rsbuild不僅提供了開箱即用的體驗,還引入了高性能的構(gòu)建機制,本文給大家介紹了Vue2遷移Rsbuild詳細步驟,需要的朋友可以參考下
背景
遇到的瓶頸
公司項目基于 VueCLI 3，存在啟動慢（約 30 秒）、熱重載慢、構(gòu)建慢以及對高版本 Node 支持不友好等問題，需要切換 Node 16版本才能啟動。
Rsbuild 簡單介紹
- Rsbuild于 2024.09.10 發(fā)布
v1.0.1正式版，而且提的 issue 也很快得到解決。 - Rsbuild是基于 Rspack 的一個構(gòu)建工具，一個高性能集成工具，幾乎零配置就可以構(gòu)建項目。
- Rspack可以解決vite開發(fā)期間的頁面加載速度慢，開發(fā)環(huán)境、生產(chǎn)環(huán)境構(gòu)建機制不一致的問題。
- Webpack 生態(tài)兼容性，Rspack 可以兼容 Webpack 的大部分插件。
具體步驟
1.根據(jù)官方提供的簡易指南完成遷移。
// rsbuild.config.js
const { defineConfig } = require('@rsbuild/core');
const { pluginVue2 } = require('@rsbuild/plugin-vue2');
export default defineConfig({
html: {
template: './public/index.html',
},
plugins: [pluginVue2()],
source: {
// 指定入口文件
entry: {
index: './src/main.js',
},
},
});
2.修訂別名和路徑簡寫
在項目中，通常會使用 @/xxx 的形式來引入模塊，這里要配置 alias 能力。
// rsbuild.config.js
const { defineConfig } = require('@rsbuild/core');
const path = require('path');
export default defineConfig({
source: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
});
3.安裝并支持 Babel、JSX、Less、SCSS
// rsbuild.config.js
const { defineConfig } = require('@rsbuild/core');
const { pluginLess } = require('@rsbuild/plugin-less');
const { pluginSass } = require('@rsbuild/plugin-sass');
const { pluginBabel } = require('@rsbuild/plugin-babel');
const { pluginVue2Jsx } = require('@rsbuild/plugin-vue2-jsx');
export default defineConfig({
plugins: [
...,
pluginBabel({
include: /\.(?:jsx|tsx)$/,
// exclude: /[\\/]node_modules[\\/]/,
}),
pluginVue2Jsx(),
pluginLess({
lessLoaderOptions: {
lessOptions: {
javascriptEnabled: true,
math: 'always',
},
},
}),
pluginSass(),
],
});
在使用 JSX 時，需要為 <script> 標(biāo)簽指定 lang 屬性，可以全局將 <script> 替換成 <script lang="jsx">。
<script lang="jsx">
export default {
render() {
return <div>123</div>;
},
};
或者使用腳本掃一遍 scr 目錄下使用 JSX 的 vue 文件。
import { readFile, writeFile } from 'fs/promises';
import { globby } from 'globby';
import ts from 'typescript';
async function run() {
const paths = await globby('src', {
expandDirectories: {
extensions: ['vue'],
},
});
for (const path of paths) {
const file = await readFile(path, { encoding: 'utf8' });
const contentArr = file.split('\n');
const start = contentArr.findIndex((item) => item.includes('<script>'));
const end = contentArr.findIndex((item) => item.includes('</script>'));
if (start === -1) continue;
const scriptContent = contentArr.slice(start + 1, end).join('\n');
const result = ts.transpileModule(scriptContent, {
compilerOptions: { module: ts.ModuleKind.ESNext, jsx: 'react' },
});
if (result.outputText.includes('React.createElement')) {
await writeFile(path, file.replace('<script>', '<script lang="jsx">'), { encoding: 'utf8' });
}
}
}
run();
rsbuild 內(nèi)置的是 LESS 4，style 必須指定 scoped 屬性，需要將 /deep/ 替換為 ::v-deep，可以全局替換。
<style src="./style.less" lang="less" scoped></style>
// style.less
//.drawer /deep/.ant-drawer-body{
// padding: 0 24px !important;
//}
.drawer ::v-deep .ant-drawer-body{
padding: 0 24px !important;
}
4.CLI參數(shù)
rsbuild 的 cli 會攔截不認識的參數(shù)，因此像vue-cli-service serve --oem=xxx這樣的命令在 rsbuild 下會報錯，我們需要這樣傳入自定義的命令行參數(shù)rsbuild dev -- --oem=xxx。
5.環(huán)境變量
rsbuild 默認只會注入PUBLIC_開頭的環(huán)境變量，為了兼容Vue CLI的行為，以及讀取其他自定義的環(huán)境變量，需要使用loadEnv載入VUE_APP_開頭的環(huán)境變量并通過source.define配置。
// rsbuild.config.js
const { defineConfig, loadEnv } = require('@rsbuild/core');
const { publicVars: vueEnvs } = loadEnv({ prefixes: ['VUE_APP_'] });
export default defineConfig({
source: {
define: {
...vueEnvs,
'process.env': {
// ...process.env,
OEM: JSON.stringify(argv.oem)
},
},
},
});
6.HTML 模板變量
將<%= BASE_URL %>替換為<%= assetPrefix %>/，注意要在末尾加上斜杠。其余變量可以使用html.templateParameters來設(shè)置
// rsbuild.config.js
const { defineConfig } = require('@rsbuild/core');
const { version } = require('./package.json');
export default defineConfig({
html: {
template: './public/index.html',
templateParameters: {
version,
title: process.env.VUE_APP_SYSTEM_NAME
},
},
});
7.開啟 HTTPS 服務(wù)
const { defineConfig } = require('@rsbuild/core');
const { pluginBasicSsl } = require('@rsbuild/plugin-basic-ssl');
module.exports = defineConfig({
plugins: [
...,
pluginBasicSsl(),
],
server: {
port: 8080,
proxy: {
'/api': {
target: 'http://10.1.1.139:19090',
secure: false, // 設(shè)置支持https協(xié)議的代理
pathRewrite: {
'^/api': '',
},
// onProxyRes(proxyRes) {
// if (proxyRes.headers['set-cookie']) {
// proxyRes.headers['set-cookie'] = proxyRes.headers['set-cookie'].map((v) => {
// return v.replace('Path=/edr', 'Path=/');
// });
// }
// },
},
},
},
});
8.將 vue 組件 Compiler 寫法修改為 render 寫法。
在使用 ant-design 1.x 時，自定義圖標(biāo)時，文檔里的寫法是 Compiler 方式，同時 vue.config.js 需要配置runtimeCompiler: true，在 rsbuild 里不支持這種寫法，需要改成 render 寫法。
const ProtectiveLogSvg = {
template: `<svg t="1666607819931" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="52249" width="200" height="200"><path d="M512 64c0 0-44.416 111.936-328.448 111.936l0 458.88C183.552 816.192 512 960 512 960s328.448-143.808 328.448-325.184l0-458.88C555.392 175.936 512 64 512 64zM510.656 494.656 224.768 494.656 224.768 217.984c223.936 0 277.504-79.488 285.952-95.168L510.72 494.656zM799.232 619.456c0 158.528-286.784 284.224-287.232 284.416L512 494.656l287.232 0L799.232 619.456z" p-id="52250"></path></svg>`,
};
const ProtectiveLogIcon = {
template: `
<a-icon :component="ProtectiveLogSvg" />
`,
data() {
return {
ProtectiveLogSvg,
};
},
};
替換為：
const ProtectiveLogSvg = {
name: 'ProtectiveLogSvg',
functional: true,
render() {
return (
<svg
t="1666607819931"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="52249">
<path
d="M512 64c0 0-44.416 111.936-328.448 111.936l0 458.88C183.552 816.192 512 960 512 960s328.448-143.808 328.448-325.184l0-458.88C555.392 175.936 512 64 512 64zM510.656 494.656 224.768 494.656 224.768 217.984c223.936 0 277.504-79.488 285.952-95.168L510.72 494.656zM799.232 619.456c0 158.528-286.784 284.224-287.232 284.416L512 494.656l287.232 0L799.232 619.456z"
p-id="52250"></path>
</svg>
);
},
};
const ProtectiveLogIcon = {
name: 'ProtectiveLogIcon',
functional: true,
render(h) {
return h('a-icon', { props: { component: ProtectiveLogSvg } });
},
};
9.移除不必要的文件
- vue.config.js
- babel.config.js
遷移下來打包編譯的速度從 30s 到 6s 提升了大概 5 倍，而熱重載基本更改后就生效。最后如果有什么錯誤之處歡迎指出。
完整配置
const { defineConfig, loadEnv } = require('@rsbuild/core');
const { pluginVue2 } = require('@rsbuild/plugin-vue2');
const { pluginBabel } = require('@rsbuild/plugin-babel');
const { pluginVue2Jsx } = require('@rsbuild/plugin-vue2-jsx');
const { pluginLess } = require('@rsbuild/plugin-less');
const { pluginSass } = require('@rsbuild/plugin-sass');
const { pluginBasicSsl } = require('@rsbuild/plugin-basic-ssl');
const path = require('path');
const { version } = require('./package.json');
const { publicVars: vueEnvs } = loadEnv({ prefixes: ['VUE_APP_'] });
module.exports = defineConfig({
html: {
template: './public/index.html',
templateParameters: {
version,
title: process.env.VUE_APP_SYSTEM_NAME,
},
},
plugins: [
pluginBasicSsl(),
pluginVue2(),
pluginBabel({
include: /\.(?:jsx|tsx)$/,
// exclude: /[\\/]node_modules[\\/]/,
}),
pluginVue2Jsx(),
pluginLess({
lessLoaderOptions: {
lessOptions: {
javascriptEnabled: true,
math: 'always',
},
},
}),
pluginSass(),
],
source: {
define: {
...vueEnvs,
'process.env': {
// ...process.env,
},
},
entry: {
index: './src/main.js',
},
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
server: {
port: 8080,
proxy: {
'/api': {
target: 'http://10.1.1.139:19090',
secure: false, // 設(shè)置支持https協(xié)議的代理
pathRewrite: {
'^/api': '',
},
// onProxyRes(proxyRes) {
// if (proxyRes.headers['set-cookie']) {
// proxyRes.headers['set-cookie'] = proxyRes.headers['set-cookie'].map((v) => {
// return v.replace('Path=/edr', 'Path=/');
// });
// }
// },
},
},
},
});
以上就是Vue2遷移Rsbuild詳細步驟的詳細內(nèi)容，更多關(guān)于Vue2遷移Rsbuild的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue是一套用于構(gòu)建用戶界面的漸進式框架。這篇文章主要介紹了Vue.js圖片預(yù)覽插件的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了關(guān)于Element-UI中slot的用法及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue在頁面數(shù)據(jù)渲染完成之后的調(diào)用方法
今天小編就為大家分享一篇Vue在頁面數(shù)據(jù)渲染完成之后的調(diào)用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue封裝一個TodoList的案例與瀏覽器本地緩存的應(yīng)用實現(xiàn)
這篇文章主要介紹了Vue封裝一個TodoList的案例與瀏覽器本地緩存的應(yīng)用實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
vue?實現(xiàn)列表跳轉(zhuǎn)至詳情且能添加至購物車功能
列表頁面顯示數(shù)據(jù)，點擊跳轉(zhuǎn)到對應(yīng)的詳情頁，詳情頁可以添加并跳轉(zhuǎn)到購物車，購物車具有常見功能，這篇文章主要介紹了vue?實現(xiàn)列表跳轉(zhuǎn)至詳情且能添加至購物車,需要的朋友可以參考下2022-10-10
Ubuntu22.04使用nginx部署vue前端項目的詳細教程
這篇文章主要給大家介紹了關(guān)于Ubuntu22.04使用nginx部署vue前端項目的詳細教程,使用nginx部署前端項目是一篇非常詳細的教程,旨在幫助初學(xué)者使用Nginx來部署前端項目,需要的朋友可以參考下2024-03-03
vue3組合API中setup、 ref、reactive的使用大全
本文給大家介紹vue3組合API中setup、 ref、reactive的用法，初步了解reactive的使用及具體用法，通過示例代碼給大家介紹的非常詳細，需要的朋友參考下吧2021-06-06
這篇文章主要介紹了vue.set() (this.$set)的用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
本文主要介紹了Nginx部署Vue.js前端項目指南,幫助您實現(xiàn)從開發(fā)到線上部署的平滑過渡,確保用戶能夠獲得最佳的訪問體驗,感興趣的可以了解一下2024-09-09
這篇文章主要介紹了Element中Slider滑塊的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07