Javascript HTML中TypeScript的引用函数_Javascript_Typescript

Javascript HTML中TypeScript的引用函数

javascript typescript

Javascript HTML中TypeScript的引用函数,javascript,typescript,Javascript,Typescript,看来我的上网时间太长了。当我开始编程时，我们使用-标记引用了一个脚本： <html> <head> <script src="lealet.js"></script>  <script src="myscript.js"></script> </head> <b

看来我的上网时间太长了。当我开始编程时，我们使用

-标记引用了一个脚本：

<html>
<head>
  <script src="lealet.js"></script> <!-- I know the path isn´t correct, I just reference leaflet -->
  <script src="myscript.js"></script>
</head>
<body><script>myFunction()</script></body>
</html>

它只是创建了一个传单地图。现在我想把它迁移到一些静态类型的脚本中。我没有在HTML文件中引用传单，而是在

mScript.ts

中使用了它：

import * as L from 'leafet';
function myFunction() { var map = L.Map(...); }

我把它编译成JS。但是，当使用上面的HTML在浏览器中运行我的站点时，我得到以下信息：

未捕获的SyntaxError:无法在模块外部使用导入语句

我用modulekind ES6瞄准ES6

您可以尝试将编译后的JavaScript用作本机ESM模块，也可以使用模块绑定解决方案

如果在脚本标记上指定

type=“module”

，现代浏览器支持即时输入JavaScript

//main.mjs
将*作为L从导入'https://unpkg.com/browse/leaflet@1.6.0/dist/传单src.esm.js'；
函数myFunction（）{
常量映射=新的L.map（…）；
}
//如果需要从内联脚本标记访问myFunction，请将其导出到窗口：
window.myFunction=myFunction；

//index.html

要使其正常工作，您应该在

tsconfig.json

中指定一个比

ES5

更新的目标。ES6应该起作用。如果需要最新的JavaScript功能，请使用较新的功能，如

ES2020

这种方法需要记住的是，像IE11这样的古老浏览器根本不会加载任何模块类型的JavaScript。此外，您要使用的库需要使用ESM模块语法，如果没有任何模块绑定解决方案，导入CommonJS样式的库是无法立即使用的。在我的示例中，我使用了.esm.js版本的传单。另外，传单的esm.js当前没有默认导入，因此您必须使用

*as

语法

另一种选择是使用模块绑定器，将代码和使用过的库传输到单个bundle.js文件中。流行的捆绑包是

如果上述选项不适用于您的项目，第三种方法是从主TypeScript文件中删除库导入，通过单独的

加载库，然后使用全局导出的

窗口.L

对象。

您不能仅引用TS文件。您必须将TS编译成JS，然后重新编译。@Jonaswillms我知道这一点。JS文件已编译。它包含以下行：

import*作为“传单”的L。这似乎是我的浏览器所抱怨的，我真的需要两个这样的文件吗？定义库的那一个和使用的另一个是？我不能在我的HTML中直接使用它吗？@HimBromBeere@HimBromBeere库文件只是在项目中使用库的一个例子。我没有nodej。这是一个纯客户端应用程序。我不能直接在HTML中调用我的函数吗？那么在我的head标签中定义dependecy并调用它在身体中的一个函数？
import * as L from 'leafet';
function myFunction() { var map = L.Map(...); }

// index.html
<script type="module" src="main.mjs"></script>