HTML 使用 Transcrypt 脚本会在尝试块错误之前给出缺失的 {

Question

我正在尝试添加一个 javascript 文件，该文件是通过 T运行scrypt 从 Python 文件生成的。

但是，当我将该脚本添加到我的 HTML 文件时，控制台中出现了一些错误，我失败了。

我使用的Python文件：try.py

def greet():
    name = document.getElementById("Name").value
    if name == "" or name.length == 0 or name == null:
        document.getElementById("groet").innerHTML = '<p><font color="#ff0000">Hello Anonymous, may I know yor name? Please insert it below:</font></p>'
    else:
        document.getElementById("groet").innerHTML = '<p><font color="#00ff00">Hello, '+name+', thank you for introducing you</font></p>'

在那个脚本之后，我运行命令 python3 -m transcrypt -b try.py 和一个名为“target”的文件夹自动创建，它包含一个文件“try.js".

所以，我写了一个 HTML 文件，它是显示问候消息的基本示例：hello.html

<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="__target__/try.js"></script>
</head>
<title>Insert Text</title>
<body onload=try.greet()>

<h2>Hello Demo Name</h2>

<p>
<div id = "groet">...</div>
</p>
<p>Your Name: <input name="name" type="text" maxlength="80" id="Name" value=""/> [Please enter your name]<br><br>
<button onclick=try.greet()>Refresh the greeting!</button>
</p>
</body>
</html>

我希望当我单击按钮或重新加载文件时应该放置问候语。但是，在控制台中我得到了两个错误：

Uncaught SyntaxError: import declarations may only appear at top level of a module try.js:1:13
Uncaught SyntaxError: missing { before try block hello.html:1:3

所以，问题是什么？

[编辑] 在 T.J 的回答之后，我更新了 html 文件如下：

'use strict';import{AssertionError,AttributeError,BaseException,DeprecationWarning,Exception,IndexError,IterableError,KeyError,NotImplementedError,RuntimeWarning,StopIteration,UserWarning,ValueError,Warning,__JsIterator__,__PyIterator__,__Terminal__,__add__,__and__,__call__,__class__,__envir__,__eq__,__floordiv__,__ge__,__get__,__getcm__,__getitem__,__getslice__,__getsm__,__gt__,__i__,__iadd__,__iand__,__idiv__,__ijsmod__,__ilshift__,__imatmul__,__imod__,__imul__,__in__,__init__,__ior__,__ipow__,
__irshift__,__isub__,__ixor__,__jsUsePyNext__,__jsmod__,__k__,__kwargtrans__,__le__,__lshift__,__lt__,__matmul__,__mergefields__,__mergekwargtrans__,__mod__,__mul__,__ne__,__neg__,__nest__,__or__,__pow__,__pragma__,__proxy__,__pyUseJsNext__,__rshift__,__setitem__,__setproperty__,__setslice__,__sort__,__specialattrib__,__sub__,__super__,__t__,__terminal__,__truediv__,__withblock__,__xor__,abs,all,any,assert,bool,bytearray,bytes,callable,chr,copy,deepcopy,delattr,dict,dir,divmod,enumerate,filter,float,
getattr,hasattr,input,int,isinstance,issubclass,len,list,map,max,min,object,ord,pow,print,property,py_TypeError,py_iter,py_metatype,py_next,py_reversed,py_typeof,range,repr,round,set,setattr,sorted,str,sum,tuple,zip}from"./org.transcrypt.__runtime__.js";var __name__="__main__";export var greet=function(){var py_name=document.getElementById("Name").value;if(py_name==""||py_name.length==0||py_name==null)document.getElementById("groet").innerHTML='<p><font color="#ff0000">Hello Anonymous, may I know yor name? Please insert it below:</font></p>';
else document.getElementById("groet").innerHTML='<p><font color="#00ff00">Hello, '+py_name+", thank you for introducing you</font></p>"};

//# sourceMappingURL=hello.map

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="module">
      import { greet } from "./hello.js";
      document.getElementById("greetButton").onclick=greet();
    </script>
  </head>
  <title>Insert Text</title>
<body>

<h2>Hello Demo Name</h2>

<p>
<div id = "groet">...</div>
</p>
<p>Your Name: <input name="name" type="text" maxlength="80" id="Name" value=""/> [Please enter your name]<br><br>
<button id="greetButton">Refresh the greeting!</button>
</p>

</body>
</html>

Answer 1

import declarations may only appear at top level of a module

很清楚：您没有将脚本作为模块加载，因此您不能使用 import。将 type="module" 添加到 script 标签。（但请确保您的目标浏览器支持模块——所有现代主要浏览器都支持，但在模块支持不存在之前，您不必返回多个版本。）

missing { before try block

你有

<body onload=try.greet()>

try是JavaScript中的关键词，不能作为标识符使用。您需要为 try 对象使用不同的名称。（我将在本回答的其余部分使用 xtry。）

如果您的代码确实是一个模块，您也将无法将 xtry 作为全局使用，即使它是在代码的顶层声明的，因为顶层范围模块不是全局范围。您需要导入它才能使用它。这也意味着您不需要 try.js 的 script 标签，因为 import 可以做到。删除 onload 和您当前的 script 标签，改为：

<script type="module">
import { xtry } from "__target__/try.js";
xtry.greet();
</script>

直到 HTML 被完全解析并且 DOM 被填充（因为 type="module"），才会运行。

旁注：onload 属性处理程序通常不是最佳实践，原因有二：1. 它们只能使用全局变量，以及 2. load 事件发生非常页面加载周期后期，等待所有资源（包括所有图像）加载。有时这就是你想要的，但不经常。相反，请使用现代事件处理（如果您确实需要在 load 上连接处理程序）并使用现代脚本技术（type="module"、defer、...）。

Answer 2

除了@T.J。 Crowder的回答，我把html里面的脚本改成了：

<script type="module">
  import * as hello from "./__target__/hello.js";
  window.hello = hello;
</script>

如 Transcrypt 教程中所述。

通过这种方式，我可以在单击按钮时调用 Python 函数。

HTML 使用 Transcrypt 脚本会在尝试块错误之前给出缺失的 {

HTML with Transcrypt script gives missing { before try block error

javascript

python

transcrypt