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