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

怎样用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日

悬赏问题

  • ¥20 机器学习能否像多层线性模型一样处理嵌套数据
  • ¥20 西门子S7-Graph,S7-300,梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改,求解答!!
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗?在Android studio上该如何部署?
  • ¥20 docker里部署springboot项目,访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效