处理 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方法
  ],
})

转发请注明出处。