Vue2遷移Rsbuild詳細(xì)步驟
更新時間：2024年10月23日 08:41:29 作者：前端偉哥
Rsbuild,一個基于Rspack的高效Web構(gòu)建工具,將Rspack的強(qiáng)大功能與易用性相結(jié)合,是你項(xiàng)目搭建的不二之選,Rsbuild不僅提供了開箱即用的體驗(yàn),還引入了高性能的構(gòu)建機(jī)制,本文給大家介紹了Vue2遷移Rsbuild詳細(xì)步驟,需要的朋友可以參考下
背景
遇到的瓶頸
公司項(xiàng)目基于 VueCLI 3，存在啟動慢（約 30 秒）、熱重載慢、構(gòu)建慢以及對高版本 Node 支持不友好等問題，需要切換 Node 16版本才能啟動。
Rsbuild 簡單介紹
- Rsbuild于 2024.09.10 發(fā)布
v1.0.1正式版，而且提的 issue 也很快得到解決。 - Rsbuild是基于 Rspack 的一個構(gòu)建工具，一個高性能集成工具，幾乎零配置就可以構(gòu)建項(xiàng)目。
- Rspack可以解決vite開發(fā)期間的頁面加載速度慢，開發(fā)環(huán)境、生產(chǎn)環(huán)境構(gòu)建機(jī)制不一致的問題。
- 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.修訂別名和路徑簡寫
在項(xiàng)目中，通常會使用 @/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 會攔截不認(rèn)識的參數(shù)，因此像vue-cli-service serve --oem=xxx這樣的命令在 rsbuild 下會報錯，我們需要這樣傳入自定義的命令行參數(shù)rsbuild dev -- --oem=xxx。
5.環(huán)境變量
rsbuild 默認(rèn)只會注入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詳細(xì)步驟的詳細(xì)內(nèi)容，更多關(guān)于Vue2遷移Rsbuild的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要介紹了Vue 換膚方案驗(yàn)證，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了vue前端實(shí)現(xiàn)下載文件功能,本文給大家介紹多種方式,感興趣的朋友跟隨小編一起看看吧2024-10-10
vue實(shí)現(xiàn)a標(biāo)簽點(diǎn)擊高亮方法
下面小編就為大家分享一篇vue實(shí)現(xiàn)a標(biāo)簽點(diǎn)擊高亮方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue路由相對路徑跳轉(zhuǎn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-08-08
vue調(diào)用本地緩存方式(監(jiān)視數(shù)據(jù)變更)
這篇文章主要介紹了vue調(diào)用本地緩存方式(監(jiān)視數(shù)據(jù)變更)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了關(guān)于Vue中keep-alive組件的深入理解，文中通過實(shí)例代碼結(jié)束的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
element中el-table局部刷新的實(shí)現(xiàn)示例
本文主要介紹了element中el-table局部刷新的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue中三種插槽(默認(rèn)插槽/具名插槽/作用域插槽)的區(qū)別詳解
默認(rèn)插槽，具名插槽，作用域插槽是vue中常用的三個插槽，這篇文章主要為大家介紹了這三種插槽的使用與區(qū)別，感興趣的小伙伴可以了解一下2023-08-08
這篇文章主要介紹了vue如何使用外部特殊字體的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07