【学一点儿前端】vue3+vite不能使用require引入包的问题(require is not defined)

问题

今天本来想简单敲个码,结果遇到一个报错:require is not defined
在这里插入图片描述

原因

查了各方资料,原因如下:
前端有很多的工具包是commonjs的写法,只能用require引入,而vite+vue3构建的项目不能使用require,只能用import,为了能够方便地引入commonjs工具包,我们需要把这些工具包转为es module。

解决方案

使用 @rollup/plugin-commonjs 插件,用于将CommonJS模块转换为ES6模块的Rollup插件.
1、安装@rollup/plugin-commonis 插件
终端中输入

npm i @rollup/plugin-commonjs

2、在vite.config.ts配置中添加该插件,注意 commonjs0必须在vue()上面,否则不生效

import commonjs from '@rollup/plugin-commonjs';

const plugins = [
    commonjs() as any,// 要放在第一行,否则不生效
];

3、随意导入commonjs工具包

import SoftAlgorithm from '../SDK/soft-algorithm-min.js';
console.log('🚀 ~ SoftAlgorithm1111:', SoftAlgorithm);

结果

引入成功
在这里插入图片描述

参考资料

vite-plugin-commonjs 使用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/456698.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Gemma: Open Models Based on Gemini Research and Technology

Gemma: Open Models Based on Gemini Research and Technology 相关链接:arxiv 关键字:Gemma、Google DeepMind、open models、language understanding、reasoning 摘要 这项工作介绍了Gemma,一系列轻量级、最先进的开放模型,基于…

C++中的STL-string类

文章目录 一、为什么学习string类?1.1 C语言中的字符串 二、准库中的string类2.2 string类2.3 string类的常用接口说明2.4 string类对象的容量操作2.5 string类对象的访问及遍历操作2.5 string类对象的修改操作2.7 string类非成员函数2.8 模拟实现string 一、为什么…

Python环境搭建 -- Python与PyCharm安装

一、Python安装 我们先找到Python的官方网站,在浏览器中搜索Python即可,然后进入Python官网 点击Downloads,选择对应匹配的操作系统 点进去之后,Python的版本分为稳定的版本和前置版本,前置的版本就是还没有发行的版本…

接口自动化测试思路和实战 —— 编写线性测试脚本实战!

接口自动化测试框架目的 测试工程师应用自动化测试框架的目的: 增强测试脚本的可维护性、易用性(降低公司自动化培训成本,让公司的测试工程师都可以开展自动化测试)。 自动化测试框架根据思想理念和深度不同,渐进式的分为以下几种: 线性脚本框架 模块…

室内定位在数字化中的应用

随着数字化经济的迅速发展,室内定位技术正逐渐成为一个不可或缺的重要组成部分。它不仅能够提升用户体验,还能够帮助企业实现更精准的市场定位和营销策略。本文将探讨室内定位在数字化经济中的应用及其带来的优势。 首先,室内定位技术在商业…

原生php单元测试示例

下载phpunit.phar https://phpunit.de/getting-started/phpunit-9.html 官网 然后win点击这里下载 新建目录 这里目录可以作为参考&#xff0c;然后放在根目录下 新建一个示例类 <?phpdeclare(strict_types1);namespace Hjj\DesignPatterns\Creational\Hello;class He…

Python3虚拟环境之pipenv

pipenv是python官方推荐的包管理工具&#xff0c;集成了virtualenv, pip和pyenv三者的功能。集合了所有的包管理工具的长处&#xff0c;自动为项目创建和管理虚拟环境。 安装 pip install pipenv在Pycharm中使用 修改Pipfile的安装源参数url&#xff0c;改为https://pypi.tun…

基于Python的中医药知识问答系统设计与实现

[简介] 这篇文章主要介绍了基于Python的中医药知识问答系统的设计与实现。该系统利用Python编程语言&#xff0c;结合中医药领域的知识和技术&#xff0c;实现了一个功能强大的问答系统。文章首先介绍了中医药知识的特点和传统问答系统的局限性&#xff0c;然后提出了设计思路…

如何在Windows系统部署Plex影音站点并实现公网访问内网媒体库

文章目录 1.前言2. Plex网站搭建2.1 Plex下载和安装2.2 Plex网页测试2.3 cpolar的安装和注册 3. 本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语 1.前言 用手机或者平板电脑看视频&#xff0c;已经算是生活中稀松平常的场景了&#xff0c;特别是各…

《鸟哥的Linux私房菜》第6章——总结与习题参考答案

目录 一、 简介 二、一些新了解的指令 1.touch- 修改文件时间或创建新文件 2.umask-新建文件/目录的默认权限 3.文件隐藏属性 4.文件特殊权限 5.file-观察文件类型 三、简答题部分 一、 简介 本章介绍了一些常用的文件与目录指令&#xff0c;包括新建/删除/复制/移动/查…

devops-git【部署及配置】

1、安装Git Linux做为服务器端系统&#xff0c;Windows作为客户端系统&#xff0c;分别安装Git&#xff1a; 【服务器端】 输入git --version 若出现 -bash:git:command not found则需要安装git&#xff1b;服务器端&#xff1a;输入yum -y install git安装完后&#xff0c;…

java枚举与模拟方法

枚举 枚举的定义 枚举算法&#xff08;穷举算法&#xff09;&#xff0c;这种算法就是在解决实际问题的时候去使用所有的方式去解决这个问题&#xff0c;会通过推理去考虑事件发生的每一种可能性&#xff0c;最后推导出结果 优点 简单粗暴&#xff0c;他暴力的枚举所有可能&…

[ROS 系列学习教程] rosbag C++ API

ROS 系列学习教程(总目录) 本文目录 一、rosbag::Bag1.1 常用接口1.2 其他接口 二、rosbag::View2.1 常用接口2.1.1 代码示例 rosbag 的 C API 主要有两个类&#xff0c;用于写bag文件的Bag类&#xff0c;和用于读bag文件的View类。 一、rosbag::Bag 用于写bag文件。 头文件…

变量直接赋值、浅拷贝、深拷贝、递归、异常

对象拷贝(对象存在堆中) 变量直接赋值 赋值 就是一个&#xff0c;比如let obj2obj1 这就是赋值&#xff0c;只是把栈中存储的值&#xff0c;赋值给另一个变量 把obj1在栈中的地址&#xff0c;赋值给obj2 <script>let str hellolet str2 str //把str的值,赋值给str2.也…

Linux系统Docker部署Plik系统结合内网穿透实现公网访问本地文件

文章目录 1. Docker部署Plik2. 本地访问Plik3. Linux安装Cpolar4. 配置Plik公网地址5. 远程访问Plik6. 固定Plik公网地址7. 固定地址访问Plik 本文介绍如何使用Linux docker方式快速安装Plik并且结合Cpolar内网穿透工具实现远程访问&#xff0c;实现随时随地在任意设备上传或者…

HarmonyOS NEXT应用开发之深色模式适配

介绍 本示例介绍在开发应用以适应深色模式时&#xff0c;对于深色和浅色模式的适配方案&#xff0c;采取了多种策略如下&#xff1a; 固定属性适配&#xff1a;对于部分组件的颜色属性&#xff0c;如背景色或字体颜色&#xff0c;若保持不变&#xff0c;可直接设定固定色值或…

企业微信如何接入第三方应用?

1.登录企业微信管理后台&#xff1a;https://work.weixin.qq.com/wework_admin​​​​​ 2.点击创建应用&#xff1b; ​​​​​​​ 3. 此时可以看到已经创建好的应用&#xff0c;并且生成应用的唯一id&#xff08;agentId&#xff09; 4. 第三方应用申请域名 (举例&…

通过OceanBase 3.x中not in无法走hash连接的变化,来看OB优化器的发展

作者简介&#xff1a; 张瑞远&#xff0c;曾从事银行、证券数仓设计、开发、优化类工作&#xff0c;现主要从事电信级IT系统及数据库的规划设计、架构设计、运维实施、运维服务、故障处理、性能优化等工作。 持有Orale OCM,MySQL OCP及国产代表数据库认证。 获得的专业技能与认…

卷径计算(膜厚叠加+数值积分器应用博途PLC SCL代码)

VN积分法卷径计算的其它方法,可以参考下面文章链接: 1、VN积分法卷径计算FB https://rxxw-control.blog.csdn.net/article/details/131612206https://rxxw-control.blog.csdn.net/article/details/1316122062、PLC数值积分器 https://rxxw-control.blog.csdn.net/article/…

【刷题训练】LeetCode:557. 反转字符串中的单词 III

557. 反转字符串中的单词 III 题目要求 示例 1&#xff1a; 输入&#xff1a;s “Let’s take LeetCode contest” 输出&#xff1a;“s’teL ekat edoCteeL tsetnoc” 示例 2: 输入&#xff1a; s “Mr Ding” 输出&#xff1a;“rM gniD” 思路&#xff1a; 第一步&am…
最新文章