檬味博客 » 问答 » CodeSandbox导出的代码为何运行不起来

CodeSandbox导出的代码为何运行不起来

就像你自己看到的那样，文件中写的javascript并不是浏览器能够理解的东西，所以错误被扔给了你。要发送浏览器能理解的js，你需要使用webpack、parcel这样的工具，在你分享的项目中已经使用了parcel。你必须做以下工作。安装project的dependecies 在项目的根目录下运行 npm run start parcel将捆绑文件，然后...
CodeSandbox导出的代码为何运行不起来
可能是编译器没有弄好。codeblocks仅仅是一个IDE，可以理解成功能丰富一点的打字编辑器。主要用来编辑输入代码。仅有打字的部分是不能编译代码的。setting 菜单 ， 选择compiler and debugger ，选择 Toolchain executable，看看编译器路径设置对不对，一般我们只是使用，不会对它的源代码做修改，因此选择release版本之后可以看到针对各种操作系统的版本，一般大家用的是Windows版本，这里注意要选择后两个版本，第一个版本是不带编译器的，盲目选择第一个版本产生的后果后面再讲。下载后直接双击安装就好了，注意安装界面中出现编译器选项，说明这个版本是自带编译器的如果下载的是前面一步中的第一种，就是这样的安装界面，注意到它是不带编译器的，因此安装好后可能无法编译（除非你电脑上本来有编译器可以供CodeBlock使用）下一步安装目录我没有选默认，而是自己改了目录，这样可能导致安装完后仍无法编译，但修改一下设置就可以解决了安装完后首先到安装目录下看有没有装上编译器，如果没有这个文件夹你可能是安装的不带编译器的版本。有上一步的这个文件夹但是仍然无法编译代码的话，是由于我们前面安装时更改了安装目录，而程序去默认的目录下（C盘）去找这个文件夹没找到就导致无法编译。解决方法很简单，打开软件，选择setting->Compiler在编译器设置页面手动浏览找到MinGW文件夹，或选择autodetect，就可以完成编译器的设置，可以顺便将GNU GCC 设为默认编译器编译成功的效果如下，如果不能编译则log栏为空，还会弹出提示栏。2022-04-13
就像你自己看到的那样，文件中写的javascript并不是浏览器能够理解的东西，所以错误被扔给了你。
要发送浏览器能理解的js，你需要使用webpack、parcel这样的工具，在你分享的项目中已经使用了parcel。
你必须做以下工作。
安装project的dependecies
在项目的根目录下运行 npm run start
parcel将捆绑文件，然后打开一个带有结果的html页面。
不幸的是，当我尝试这个包裹没有为我工作，有错误相关的JSON加载，但是我已经设法让游戏工作，通过运行 npm run build这将为你输出一个名为 dist 的文件夹中的构建文件。
转到dist文件夹，然后在那里启动一个本地服务器并访问该文件，它应该可以工作，但是对我来说，它再次没有工作。但我注意到，它是由于parcel没有得到正确的捆绑js文件的相对路径。
要解决这个问题，打开dist文件夹中的index.html文件，你会发现那里有一个脚本
2022-04-07
mengvlog 阅读 7 次 更新于 2025-07-21 05:59:11 我来答关注问题0
2 个回答檬味博客专题活动
  • 文暄生活科普 JavaScript线上沙箱环境——codesandbox.io

    在一次笔记本故障的无奈情境下，利用codesandbox在备用笔记本上快速开发无关主业务的代码，避免了从头搭建开发环境的繁琐过程。从codesandbox导出的代码集成至公司项目，不仅节省了时间，也保证了项目进度。总结，codesandbox.io为JavaScript开发者提供了一个功能全面、使用便捷的线上沙箱环境。无论是日常开发、项目...

  • 翡希信息咨询 强烈 推荐 13 个 Web前端在线代码IDE

    强烈推荐13个Web前端在线代码IDE：CodeSandbox 网址：https://codesandbox.io/ 特点：专注于构建完整的Web应用程序，支持React、Vue和Angular等前端框架。提供自动保存、版本控制和调试工具，非常适合分享和协作完整的项目和应用程序。图片：CodePen 网址：https://codepen.io/ 特点：专注于创建和共享前端代码...

  • 翡希信息咨询 回顾 12 个面向 Web 开发人员的在线代码编辑器

    Codesandbox 简介：Codesandbox是一个专注于前端开发的在线代码编辑器，支持React、Vue、Angular等流行框架。它提供了丰富的模板和文件结构，以及与GitHub的集成，方便开发者进行版本控制和协作。特点：支持NPM、热模块重新加载、内置终端、自动运行Jest测试等。此外，Codesandbox还支持以zip形式导出代码，方便开发者...

  • 文暄生活科普 微前端学习笔记(3):前端沙箱之JavaScript的sandbox(沙盒/沙箱)

    沙盒是一种隔离机制，允许程序在独立环境中运行，避免对外界程序造成影响，保障系统安全。在开发中，沙盒环境通常用于服务器中通过Docker创建容器，或在 Codesandbox中运行代码示例，以及在程序中执行动态脚本。微前端框架主要负责两个工作：一是实现JS沙盒，二是将沙盒内的执行结果输出为WebComponents，插入到页...

  • 文暄生活科普 前端开发工具有哪些常用的编辑器?

    1. Codesandbox.io：网址：codesandbox.io/专注于构建完整的 Web 应用程序，支持多种前端框架和库，提供自动保存、版本控制和调试工具，适合分享和协作项目。2. CodePen：网址：codepen.io/专为前端代码片段、原型设计和小型项目而设计，提供实时预览功能，支持创建收藏夹、团队项目和添加笔记，适合快速编码...

其他代码类似问题

檬味博客在线解答立即免费咨询

代码相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部