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 ''; 方法 引入
安装
JavaScript Code复制内容到剪贴板
- yarn add -D vite-plugin-require-transform
或者
JavaScript Code复制内容到剪贴板
- npm i vite-plugin-require-transform --save-dev
使用：
JavaScript Code复制内容到剪贴板
- // vite.config.ts配置
- import requireTransform from 'vite-plugin-require-transform';
- plugins: [
- // ...
- requireTransform({
- fileRegex:/.ts$|.tsx$|.vue$/
- // fileRegex:/.js$|.jsx$|.vue$/
- }),
- ]
上一篇 vue3整合UEditor编辑器
