vite項目require語法兼容問題解决require is not defined

vite項目不支持require語法問題解决 require is not defined

Vite默認使用es6標准的 import 的導入方式，不支持require引入。默認有Vite自己的引入方式https://vitejs.cn/guide/assets.html

但在在日常使用Vue3+Ts+Vite構建項目中,部分比較舊的三方插件中默認使用的是require引入(webpack構建可以使用),會出現require方法報錯的兼容性問題 require is not defined 。

1. require和import導入區別

	年份	出處	使用
require/exports	2009	CommonJS	const lodash = require(‘lodash’);
import/export	2015	ECMAScript2015（ES6）	import lodash from ‘lodash’;

2. 解决方法

Vite 倉庫社區生態 https://github.com/vitejs/awesome-vite中有一個

插件 vite-plugin-require-transform。 插件自動轉換import xxx from ‘’;方法 引入

安裝

yarn add -D vite-plugin-require-transform

或者

npm i vite-plugin-require-transform --save-dev

使用

// vite.config.ts配置

import requireTransform from 'vite-plugin-require-transform';

  plugins: [
    // ...
    requireTransform({
    
      fileRegex:/.ts$|.tsx$|.vue$/
	// fileRegex:/.js$|.jsx$|.vue$/
    }),
  ]

添加之後npm run build打包 npm run preview 預覽無异常。