在浏览器中使用 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（通用模块定义）。这只是意味着库的所有功能都是通过全局变量公开的。对于您提供的库 link，主要的全局变量似乎是 Handlebars.

如果您想将 handlebars 作为 CommonJS/ES6 模块直接导入到您的脚本中，您需要使用 Webpack 等构建工具。

尝试在浏览器中呈现您的 HTML 文档，然后在开发工具控制台中输入 Handlebars，您应该会看到一个包含所有 Handlebars 导出函数的对象。

在浏览器中使用 Handlebars 作为 ES6 模块

Using Handlebars in the Browser as an ES6 Module

html

javascript

handlebars.js

es6-modules