HTML 中 TypeScript 的引用函数

Question

似乎我的网络时代太遥远了。 当我开始编程时，我们使用<script> -tag 引用了一个脚本：

<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>

myScript是这样的：

function myFunction() { var map = new L.Map(...); }

这只是创建一个传单地图。 现在我想将它迁移到一些静态类型的 TypScript。 我没有在我的 HTML 文件中引用传单，而是在mScript.ts使用了mScript.ts ：

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

我把它编译成JS。 但是，当使用上面的 HTML 在浏览器中运行我的网站时，我得到了这个：

未捕获的语法错误：无法在模块外使用导入语句

我的目标是带有模块类 ES6 的 ES6。

Answer 1

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

如果您在脚本标记上指定type="module" ，现代浏览器支持开箱即用的 JavaScript 导入。

// main.mjs
import * as L from 'https://unpkg.com/browse/leaflet@1.6.0/dist/leaflet-src.esm.js';

function myFunction() {
  const map = new L.Map(...);
}

// if you need to access myFunction from an inline script tag, export it to window :
window.myFunction = myFunction;

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

要tsconfig.json正常工作，您应该在tsconfig.json指定比ES5更新的目标。 ES6 应该可以工作。 如果您需要更新的 JavaScript 功能，请使用更新的东西，例如ES2020 。

这种方法需要记住的是，像 IE11 这样的古老浏览器根本不会加载任何模块类型的 JavaScript。 此外，您要使用的库需要使用 ESM 模块语法，导入 CommonJS 样式库在没有任何模块捆绑解决方案的情况下无法开箱即用。 在我的示例中，我使用了 Leaflet 的 .esm.js 版本。 此外，leaflet 的 esm.js 目前没有默认导入，因此您必须使用* as语法。

另一种选择是使用模块打包器，将你的代码和你使用的库转换成一个 bundle.js 文件。 流行的捆绑器是

如果上述选项不适用于您的项目，第三种方法是从主 TypeScript 文件中删除库导入，通过单独的<script src="leaflet.js"></script>加载库，然后使用全局导出的window.L对象。

HTML 中 TypeScript 的引用函数

问题描述

1 个解决方案

解决方案1
2 2020-03-01 12:06:12

HTML 中 TypeScript 的引用函数

问题描述

1 个解决方案

解决方案1 2 2020-03-01 12:06:12

解决方案1
2 2020-03-01 12:06:12