如何在静态代码框模板中使用脚本？答案

【问题标题】：How can I use scripts in a static codesandbox template?如何在静态代码框模板中使用脚本？
【发布时间】：2020-04-27 13:59:13
【问题描述】：

我创建了一个static codesandbox template，但似乎无法让 javascript 工作：

   <html>
     <head>
     <script src="./app.js"></script>
     </head>
     <body>
       <p>Just a test</p>
       <script>console.log("heyyy")</script>
     </body>
    </html>

app.js

 console.log("boink")

控制台根本不显示任何控制台输出。没有捆绑器的静态网站是否允许使用脚本？

【问题讨论】：

似乎 webpack 正在清除控制台。您可以通过按 F12 并看到来自 webpack 源文件的 "Console was clear" 语句来判断这一点。尝试使用alert('boink');，它应该可以工作。
简单的setTimeout(() => console.log("boink boink"), 1000); 也可以。不知道为什么控制台被清除了

标签： javascript codesandbox

【解决方案1】：

扩展我的 cmets。看起来有一个默认设置会导致控制台被清除。您可以通过单击齿轮图标来更改它：

然后更改此选项（如果启用，它将为绿色）：

关闭后，控制台不再为我清除。

【讨论】：

感谢您的回复。该齿轮图标实际上没有显示在我的代码框编辑器中，但我在file > preferences 下禁用了设置clear console。奇怪的是，这对初始日志语句没有影响，它们仍然没有显示。但是，setTimeout 有效，所以我猜脚本实际上正在运行！
我还发现app.js 实际上是一个系统名称，因此该文件会被自动忽略。但无论出于何种原因，控制台仍然被清除。
也许可以尝试通过 GH 直接联系 Codesandbox 工作人员：github.com/codesandbox/codesandbox-client/issues。他们系统的某些部分是开源的
最后，我发现包含多个脚本不起作用，因为外部脚本中的变量类型检查失败（x is not defined 当x 来自另一个文件时）。我猜这些静态模板真的不适合与脚本一起使用。不是真正的问题，但很高兴知道！