工业艺术 2022-04-27 16:03 采纳率: 100%
浏览 78
已结题

怎样用vite把javascript项目部署到浏览器上?

问题遇到的现象和发生背景:
我是大四毕业生,这是我毕设遇到的问题
我有几个javascript代码,它们之间存在着require和module的依赖调用关系
我在VSCode上编辑它们,并用VSCode自带的控制台运行它们,这些都没有问题
然后我需要把我的项目部署到浏览器上运行。不求有什么网页界面显示,只需要能在浏览器的控制台里呈现出和VSCode控制台里一样的结果。
我被要求使用vite,于是我新建了一个vite项目(使用的框架是vue3),并将所有javascript代码中处于最顶端调用位置的那个代码复制到新建项目里自带的main.js中了。

问题相关代码(javascript):
const TestExecutor = require('./client/TestExecutor');
const TestCase = require('./client/TestCase')

const testcase1 = new TestCase();
testcase1.name = "新建用例1"
testcase1.url = 'http://localhost:8080'
testcase1.schema = {……(此处省略)}

const testexecutor1 = new TestExecutor(testcase1);

运行结果及报错内容:
我直接在VSCode的控制台里输入npm run dev来运行我的vite项目,并在浏览器中打开控制台。
出现了错误"uncaught reference error: require is not defined".

我通过查阅资料得知vite无法解析require或者module等原本属于Node.js的后端命令。我还了解到一个叫做“browserify”的 工具据说可以实现使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码,通过预编译让前端 Javascript 直接使用 Node NPM 安装的一些库。

但是我使用browserify的时候遇到了严重的困难。在我尝试运行browserify main.js -o mainBundle.js的时候,出现了错误,无法将“browserify”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。网上关于这个问题的答案并不能帮我解决实际问题。

我只是想要成功实现在浏览器的控制台中出现我这一系列代码在VSCode中运行出的相同的结果,仅此而已。
请大家帮帮忙吧,谢谢了。

  • 写回答

1条回答 默认 最新

  • Heerey525 前端领域新星创作者 2022-04-27 16:13
    关注

    vite是基于esmodule打包,只能使用识别import 和 export ,require引入属于commonjs规范,不支持

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 5月5日
  • 已采纳回答 4月27日
  • 创建了问题 4月27日

悬赏问题

  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥15 DruidDataSource一直closing
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
  • ¥50 STM32单片机传感器读取错误
  • ¥50 power BI 从Mysql服务器导入数据,但连接进去后显示表无数据
  • ¥15 (关键词-阻抗匹配,HFSS,RFID标签)
  • ¥50 sft下载大文阻塞卡死
  • ¥15 机器人轨迹规划相关问题