處理 vite 里面 __require() 方法報錯

2個月前 給本地項目添加了vite 構建工具，一直懶得去總結，想想還是要總結一下，就先從記錄解決問題開始。

其中有個報錯 `Uncaught Error: Dynamic require of ... is not supported`，vite 為什么要把第三方插件里面有些require() 轉成 __require()，導致報錯，這個目前我還不是很清楚，

后續繼續關注，我們先來解決掉這個報錯：

該插件已上傳npm

 

解決方法：就是寫一個 vite 插件（注：vite插件默認是在瀏覽器加載資源時才會調用）

這個插件的作用就是把 __require 方法替換成 import ... from ...

1. 定義插件：

// 參數：需要處理的第三方插件文件名或者項目內某文件名

export const transformRequireDynamic = (includes = []) => {
  return {
    name: 'transformRequireDynamic',
    apply: 'serve',
    transform(code, id) {
      let result = code
      if (includes.some(item => id.includes(item))) {
        result = transform__require_function(code, id)
      }

      return {
        code: result,
        map: null,
        warnings: null
      }
    }
  }
}

/**
 * 替換第三方插件里面的 __require() 方法
 * @param {*} code
 * @param {*} id
 * @returns
 */
const transform__require_function = function(code, id) {
  if (!/\/node_modules\//g.test(id)) return code

  const requireRegex = /_{2}require*\(\s*(["'].*["'])\s*\)/g
  const IMPORT_STRING_PREFIX = '__require_for_vite'
  const requireMatches = code.matchAll(requireRegex)
  let importsString = ''
  let packageName = ''
  let replaced = false
  for (const item of requireMatches) {
    if (!isString(item[1])) {
      console.warn(`Not supported dynamic import, file:${id}`)
      continue
    }
    replaced = true
    packageName = `${IMPORT_STRING_PREFIX}_${randomString(6)}`
    importsString += `import ${packageName} from ${item[1]};\n`
    code = code.replace(item[0], `${packageName}`)
  }
  if (replaced) {
    code = importsString + code
  }
  return code
}

/**
 *
 * @param {必填，數字} length
 * @returns hash串
 */
function randomString(length) {
  const code = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'
  let result = ''
  for (let index = 0; index < length; index++) {
    result += code[Math.floor(Math.random() * code.length)]
  }
  return result
}
function isString(text) {
  try {
    return typeof eval(text) === 'string'
  } catch (err) {
    return false
  }
}

 

2. 使用方式：在 vite.config.js 中引入

import { transformRequireDynamic } from './plugins.js'

export default defineConfig({
  plugins: [
    transformRequireDynamic(['zui-plugins']), // 替換第三方插件里面__require方法
  ],
})

轉發請注明出處。