在瀏覽器中使用 Handlebars 作為 ES6 模塊

Question

我正在嘗試在瀏覽器（客戶端腳本）中使用 Handlebars。 我正在導入一個 js 模塊 templating.js（見下文）並希望將 Handlebars 庫作為 ES6 模塊導入，但找不到任何文檔。

在下面的示例中，我將以下 js 庫的內容提升為 handlebars.js

https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.js

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Templating</title>
  <meta name="description" content="example showing how to template content">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="templating.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js" integrity="sha512-zT3zHcFYbQwjHdKjCu6OMmETx8fJA9S7E6W7kBeFxultf75OPTYUJigEKX58qgyQMi1m1EgenfjMXlRZG8BXaw==" crossorigin="anonymous"></script>
  <script type="module" src="templating.js"></script>
</head>

<body>
  <header>
  <h1>Templating</h1>
  </header>
  <main>

  </main>
  
  
</body>
</html>


/* templating.js */

import { Handlebars } from './handlebars.js' // v4.7.6

document.addEventListener('DOMContentLoaded', event => {
  console.log('DOMContentLoaded')
})

我收到錯誤：請求的模塊 './handlebars.js' 不提供名為 'Handlebars' 的導出

有人知道嗎：

使用什么車把庫？
如何將其導入到我的腳本中？

任何幫助非常感謝...

Answer 1

通過腳本標簽加載車把會將其公開為 UMD（通用模塊定義）。 這只是意味着庫的所有功能都通過全局變量公開。 在您提供的庫鏈接的情況下，主要的全局變量似乎是Handlebars 。

如果您想將把手作為 CommonJS/ES6 模塊直接導入腳本，則需要使用構建工具，例如 Webpack。

嘗試在瀏覽器中呈現您的 HTML 文檔，然后在 devtools 控制台中鍵入Handlebars ，您應該會看到一個包含所有 Handlebars 導出函數的對象。

在瀏覽器中使用 Handlebars 作為 ES6 模塊

問題描述

1 個解決方案

解決方案1
0 已采納 2020-10-23 18:15:51

在瀏覽器中使用 Handlebars 作為 ES6 模塊

問題描述

1 個解決方案

解決方案1 0 已采納 2020-10-23 18:15:51

解決方案1
0 已采納 2020-10-23 18:15:51