webpack2的vuejs老專案遷移到vite2.0的記錄

wojianishanghaojiugoujia發表於2021-04-17

最近 vite2 非常火，它基於瀏覽器原生ES模組載入的現代化構建工具，主要由兩部分組成：

一個開發伺服器，它利用原生 ES 模組提供了豐富的內建功能，如速度快到驚人的模組熱更新（HMR）。
一套構建指令，它使用 Rollup 打包你的程式碼，預配置輸出高度優化的靜態資源用於生產。

為什麼選用vite？

隨著我們開始構建越來越多的雄心勃勃的應用程式，我們處理的 JavaScript 數量也呈指數級增長。大型專案包含數千個模組的情況並不少見。我們開始遇到基於 JavaScript 的工具的效能瓶頸：通常需要很長時間（有時甚至是幾分鐘！）才能啟動開發伺服器，即使使用 HMR，檔案編輯也需要幾秒鐘才能在瀏覽器中反映出來。緩慢的反饋會極大地影響開發人員的生產力和幸福感。
Vite 旨在利用生態系統中的新進展解決上述問題：瀏覽器支援原生模組，越來越多 JavaScript 工具使用編譯型語言編寫。

公司內部OA系統，基於vue2+webpack2開發，目前頁面有上百個，每次啟動開發或者編譯都需要至少5分鐘，非常慢。由於 vite 官方沒有原生支援vue2.0，需要依賴於第三方外掛，而且對於編譯的穩定性和風險沒辦法保證，因此本次引入vite優先保證本地開發伺服器的執行，儘量避免修改程式碼，編譯還是由原來的webpack來執行。

首先安裝 vite、vite-plugin-vue2

$ npm i vite vite-plugin-vue2 sass --save-dev

新建配置檔案 vite.config.js

import {defineConfig} from 'vite'
import {createVuePlugin} from 'vite-plugin-vue2'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    createVuePlugin({
      jsx: true,
    }),
  ],
  resolve: {
    extensions: ['.vue', '.js', '.json'],
    alias: [
      {find: "@", replacement: path.resolve(__dirname, './src')},
    ],
  },
  server: {
    proxy: {}, // 原本專案的後端介面代理
    base: '/index-vite.html', // 保留原本的 index.html，新建一個 index-vite.html
    open: '/index-vite.html'
  },
})

index-vite.html 並增加入口

<!DOCTYPE html>
<html>
    <head>
        <!-- 頁面字符集 -->
        <meta charset="utf-8" />
        <!-- 360標籤，頁面需預設用極速核-->
        <meta name="renderer" content="webkit" />
        <!-- 禁止移動端點選輸入框自動放大-->
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> -->
        <!-- 使用Chrome核心來做渲染-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <!-- 網頁標題-->
        <title>document</title>
    </head>
    <body>
    <div id="app"></div>
    <!-- 入口 -->
    <script type="module" src="./src/index.js"></script>
    </body>
</html>

為了儘量不對原始碼進行修改，保證能正常編譯專案，因此對程式碼的修改使用 vite-plugin transform 鉤子來實現，能夠在引入程式碼之前對程式碼進行修改。

參照專案中的舊程式碼，我們的外掛主要需要提供以下幾種對程式碼的轉換：

module.exports -> export default。
懶載入require轉成 import('...')。
程式碼中使用 require(...)，需替換成臨時變數 script_inject_var__0，然後在指令碼作用域頂部引入變數：import script_inject_var__0 from '...'。
template中引入的require資源，例如 <img :src="require(...)" -> <img :src="tpl_inject_var__1"、在 script 塊中 import tpl_inject_var__1 from '...'，然後在元件計算屬性/data屬性中引入 computed: {tpl_inject_var__1}。
require.context 轉換成 import.meta.globEager

首先建立 ./vite/plugins/replace.js

import path from 'path'
import url from 'url'

const dirname = path.dirname(url.fileURLToPath(import.meta.url))
const srcDir = path.resolve(dirname, '../../src')
const enterDir = path.resolve(dirname, '../../enter')

function getPath(filepath) {
  let sps = filepath.split('?', 2)
  return sps[0]
}

function getExtension(filepath) {
  return path.extname(getPath(filepath))
}

function replaceCode(code, filename, ext) {
  let n = 0
  let script, template, style
  if (ext === '.vue') {
    try {
      template = code.match(/<template(?:.*?)>(?<template>.+)<\/template>/is).groups.template
    } catch (ignore) {
    }
    try {
      script = code.match(/<script(?:.*?)>(?<script>.+)<\/script>/is).groups.script
    } catch (ignore) {
    }
    try {
      style = code.match(/<style(?:.*?)>(?<style>.+)<\/style>/is).groups.style
    } catch (ignore) {
    }
  } else if (ext === '.js') {
    script = code
  } else {
    return {n, code}
  }

  let tplInjectVar = []

  if (template) {
    template = template.replace(/require\((.+?)\)/igm, function (_, match) {
      n++
      tplInjectVar.push(match)
      return `tpl_inject_var__${tplInjectVar.length - 1}`
    })
  }

  if (style) {
    style = style.replace(/\/deep\//ig, function (match) {
      n++
      return '::v-deep'
    })
  }

  let scriptInjectVar = []
  if (script) {
    // 替換 resolve => require(['@    resolve => require(['@/guide/guidePage.vue'], resolve)
    //  () => import('../src/guide/guidePage.vue'),
    script = script.replace(/resolve\s*?=>\s*?require\(\[['"`]@(\/.*?)(["'`])],\s*?resolve\s*?\)/img, function (matched, m1, m2) {
      n++
      return `() => import(${m2}../src${m1}${m2})`
    })

    // 替換 resolve => require([
    script = script.replace(/resolve\s*?=>\s*?require\(\[(['"`]@\/.*?["'`])],\s*?resolve\s*?\)/img, function (matched, m1) {
      n++
      return `() => import(${m1})`
    })

    script = script.replace(/require\((.+?)\)(.default)?/img, function (_, match) {
      n++
      scriptInjectVar.push(match)
      return `script_inject_var__${scriptInjectVar.length - 1}`
    })

    scriptInjectVar.forEach((vvar, i) => {
      n++
      script = `import script_inject_var__${i} from ${vvar}\n${script}`
    })

    // 替換 module.exports =
    script = script.replace(/module\.exports\s*?=/, function () {
      n++
      return 'export default '
    })
  }

  if (ext === '.js') {
    code = script
    return {n, code}
  }

  if (ext === '.vue') {
    tplInjectVar.forEach((vvar, i) => {
      n++
      script = `import tpl_inject_var__${i} from ${vvar}\n${script}`
    })

    if (tplInjectVar.length) { // 新增計算屬性
      let computedN = 0
      script = script.replace(/(computed\s*?:\s*?){/is, function (match) {
        n++
        computedN++
        let vvars = ''
        tplInjectVar.forEach((vvar, i) => {
          vvars += `tpl_inject_var__${i},`
        })
        return `${match}${vvars}`
      })
      if (!computedN) { // 沒有計算屬性，就加一個
        script = script.replace(/\s*?export\s+?default\s+?{/is, function (match) {
          n++
          computedN++
          let vvars = ''
          tplInjectVar.forEach((vvar, i) => {
            vvars += `tpl_inject_var__${i},`
          })
          return `${match}\ncomputed:{${vvars}},`
        })
      }
      if (!computedN) {
        console.warn('沒有注入 computed!!')
      }
    }

    let ret = code
    if (template) {
      ret = ret.replace(/(<template(?:.*?)>)(.+)(<\/template>)/is, function (_, m1, m2, m3) {
        return `${m1}${template}${m3}`
      })
    }
    if (script) {
      ret = ret.replace(/(<script(?:.*?)>)(.+)(<\/script>)/is, function (_, m1, m2, m3) {
        return `${m1}${script}${m3}`
      })
    }
    if (style) {
      ret = ret.replace(/(<style(?:.*?)>)(.+)(<\/style>)/is, function (_, m1, m2, m3) {
        return `${m1}${style}${m3}`
      })
    }

    return {n, code: ret}
  }
}

export default function replacement() {
  return {
    enforce: 'pre',
    transform(code, rawId) {
     // 由於就這一個地方，因此就直接用路徑判斷，直接返回原始碼，就不做正則匹配替換了
      if (rawId.endsWith('/views/liveMonitor/icons/index.js')) {
        return {
          code: `
import Vue from 'vue'
import SvgIcon from '../components/SvgIcon'// svg component

// register globally
Vue.component('svg-icon', SvgIcon)

let all = import.meta.globEager('./svg/*.svg')
`,
          map: null,
        }
      }
      let filepath = path.resolve(getPath(rawId))
      let ext = getExtension(getPath(rawId))

      if ((filepath.startsWith(srcDir) || filepath.startsWith(enterDir)) && ['.vue', '.js'].includes(ext)) {
        let ret = replaceCode(code, filepath, ext)
        if (ret.n === 0) {
          return null
        }
        return {
          code: ret.code,
          map: null,
        }
      }
      return null
    }
  }
}

在 vite.config.js 中引入外掛

import replacement from './vite/plugins/replacement.js'
...
export default defineConfig({
  plugins: [
    replacement(),
    createVuePlugin({
      jsx: true,
    }),
  ],
  ...

在 package.json scripts 中新增兩項

    "vite-dev": "vite"

至此可以啟動 vite 了。

npm run vite-dev

以上就是為專案引入 vite2，並且對原本程式碼0修改的過程記錄。這裡僅做拋磚引玉，讀者可以自定義外掛來對程式碼進行替換，對其他不相容的語法打補丁。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

將資料庫遷移到ASM的實驗記錄
2009-12-18
資料庫ASM
將typescript+react的webpack專案遷移到parcel
2017-12-25
TypeScriptReactWeb
擁抱 Docker！Laravel 老專案開發環境從 Homestead 遷移到 Sail
2022-07-02
DockerLaravel開發環境AI
記錄從vuecli打包庫遷移到rollup打包
2022-06-08
Vue
OC與Swift混編專案遷移到Swift4.2小記
2019-02-28
Swift
JavaScript 專案遷移到 TypeScript 步驟以及遇到的問題
2019-03-15
JavaScriptTypeScript
WPF 應用遷移到 Electron 框架過程記錄
2024-03-05
框架
[譯] 將專案遷移到 Yarn 然後又遷回 npm
2018-07-03
YarnNPM
Flutter專案遷移到Null Safety空安全
2021-08-06
FlutterNull
AS3.0-老專案遷移若干坑
2017-10-29
S3
[譯] 將一箇舊的大型專案遷移到 Python 3
2019-03-04
Python
【原創】老谷"專案管理MSN群"6.23記錄
2019-04-05
專案管理
svn專案遷移至gitlab流程(保留提交記錄)
2022-02-11
Gitlab
webpack2 專案構建一
2017-07-01
Web
【譯】將 Android 專案遷移到 Kotlin 語言
2017-08-22
AndroidKotlin
將SpringBoot PetClinic REST遷移到Quarkus的開源專案
2020-09-18
Spring BootREST
舊 WCF 專案成功遷移到 asp.net core web api
2020-08-16
ASP.NETWebAPI
Gradle實戰及Maven專案遷移採坑記錄
2020-12-21
GradleMaven
記將一個大型客戶端應用專案遷移到 dotnet 6 的經驗和決策
2022-05-05
客戶端
將ORACLE資料庫資料檔案遷移到其他目錄(ZT)
2010-04-24
Oracle資料庫
專案出現的問題記錄
2020-10-09
svn 遷移到 git 的問題
2017-05-17
Git
遷移到ASM
2010-03-07
ASM
Linux下快速遷移海量檔案的操作記錄
2017-01-03
Linux
專案遷移的思考
2019-03-07
把檔案系統的資料檔案遷移到ASM儲存
2014-05-14
ASM
Flutter專案整合mqtt的過程記錄
2019-11-01
FlutterMQQT
Flutter日曆專案的優化記錄
2019-10-15
Flutter優化
從檔案系統遷移到ASM上
2018-02-05
ASM
oralce 從檔案系統遷移到ASM
2012-08-24
ASM
使用資料庫冷備份方式進行資料庫遷移,資料庫檔案遷移到不同的目錄
2011-02-24
資料庫
【實戰】記一次老專案的swagger整合
2020-10-30
Swagger
遷移到 Vim 的10個難關
2012-04-26
記一次preact遷移到react16.6.7的經歷
2019-03-01
React
svn 遷移到git
2022-07-19
Git
svn遷移到git
2015-12-31
Git
SQLITE 遷移到 MYSQL
2010-09-09
SQLiteMySql
使用MyEclipse將HTML5移動專案遷移到PhoneGap（三）
2018-01-23
EclipseHTML

webpack2的vuejs老專案遷移到vite2.0的記錄

相關文章