关于vite:vite项目require语法兼容问题解决-require-is-not-defined

vite我的项目不反对require语法问题解决 require is not defined

Vite默认应用es6规范的 import 的导入形式,不反对require引入。默认有Vite本人的引入形式https://vitejs.cn/guide/asset…

但在在日常应用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/awe…中有一个

插件 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 预览无异样。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理