欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue2遷移Rsbuild詳細(xì)步驟

 更新時(shí)間：2024年10月23日 08:41:29   作者：前端偉哥  
Rsbuild,一個(gè)基于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è)構(gòu)建工具，一個(gè)高性能集成工具，幾乎零配置就可以構(gòu)建項(xiàng)目。
  • Rspack可以解決vite開發(fā)期間的頁面加載速度慢，開發(fā)環(huán)境、生產(chǎn)環(huán)境構(gòu)建機(jī)制不一致的問題。
  • Webpack 生態(tài)兼容性，Rspack 可以兼容 Webpack 的大部分插件。

具體步驟

1.根據(jù)官方提供的簡易指南完成遷移。

Vue CLI - Rsbuild

// 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 時(shí)，需要為 <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 下會報(bào)錯，我們需要這樣傳入自定義的命令行參數(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 時(shí)，自定義圖標(biāo)時(shí)，文檔里的寫法是 Compiler 方式，同時(shí) 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.js圖片預(yù)覽插件使用詳解

    Vue.js圖片預(yù)覽插件使用詳解

    Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。這篇文章主要介紹了Vue.js圖片預(yù)覽插件的相關(guān)知識，非常不錯，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-08-08
  • 關(guān)于Element-UI中slot的用法及說明

    關(guān)于Element-UI中slot的用法及說明

    這篇文章主要介紹了關(guān)于Element-UI中slot的用法及說明,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue在頁面數(shù)據(jù)渲染完成之后的調(diào)用方法

    Vue在頁面數(shù)據(jù)渲染完成之后的調(diào)用方法

    今天小編就為大家分享一篇Vue在頁面數(shù)據(jù)渲染完成之后的調(diào)用方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)

    Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)

    這篇文章主要介紹了Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • vue?實(shí)現(xiàn)列表跳轉(zhuǎn)至詳情且能添加至購物車功能

    vue?實(shí)現(xiàn)列表跳轉(zhuǎn)至詳情且能添加至購物車功能

    列表頁面顯示數(shù)據(jù)，點(diǎn)擊跳轉(zhuǎn)到對應(yīng)的詳情頁，詳情頁可以添加并跳轉(zhuǎn)到購物車，購物車具有常見功能，這篇文章主要介紹了vue?實(shí)現(xiàn)列表跳轉(zhuǎn)至詳情且能添加至購物車,需要的朋友可以參考下
    2022-10-10
  • Ubuntu22.04使用nginx部署vue前端項(xiàng)目的詳細(xì)教程

    Ubuntu22.04使用nginx部署vue前端項(xiàng)目的詳細(xì)教程

    這篇文章主要給大家介紹了關(guān)于Ubuntu22.04使用nginx部署vue前端項(xiàng)目的詳細(xì)教程,使用nginx部署前端項(xiàng)目是一篇非常詳細(xì)的教程,旨在幫助初學(xué)者使用Nginx來部署前端項(xiàng)目,需要的朋友可以參考下
    2024-03-03
  • vue3組合API中setup、 ref、reactive的使用大全

    vue3組合API中setup、 ref、reactive的使用大全

    本文給大家介紹vue3組合API中setup、 ref、reactive的用法，初步了解reactive的使用及具體用法，通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧
    2021-06-06
  • vue.set() (this.$set)的用法及說明

    vue.set() (this.$set)的用法及說明

    這篇文章主要介紹了vue.set() (this.$set)的用法及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-06-06
  • Nginx部署Vue.js前端項(xiàng)目的實(shí)現(xiàn)

    Nginx部署Vue.js前端項(xiàng)目的實(shí)現(xiàn)

    本文主要介紹了Nginx部署Vue.js前端項(xiàng)目指南,幫助您實(shí)現(xiàn)從開發(fā)到線上部署的平滑過渡,確保用戶能夠獲得最佳的訪問體驗(yàn),感興趣的可以了解一下
    2024-09-09
  • Element中Slider滑塊的具體使用

    Element中Slider滑塊的具體使用

    這篇文章主要介紹了Element中Slider滑塊的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07

最新評論