工业艺术 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 wpf datagrid如何实现多层表头
  • ¥15 为啥画版图在Run DRC会出现Connect Error?可我Calibre的hostname和计算机的hostname已经设置成一样的了。
  • ¥20 网站后台使用极速模式非常的卡
  • ¥20 Keil uVision5创建project没反应
  • ¥15 mmseqs内存报错
  • ¥15 vika文档如何与obsidian同步
  • ¥15 华为手机相册里面的照片能够替换成自己想要的照片吗?
  • ¥15 陆空双模式无人机飞控设置
  • ¥15 sentaurus lithography
  • ¥100 求抖音ck号 或者提ck教程