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

【问题标题】：Using Handlebars in the Browser as an ES6 Module在浏览器中使用 Handlebars 作为 ES6 模块
【发布时间】：2020-10-23 17:47:26
【问题描述】：

我正在尝试在浏览器中使用 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”的导出

有谁知道：

使用什么车把库？
如何将它导入到我的脚本中？

非常感谢任何帮助...

【问题讨论】：

标签： javascript html handlebars.js es6-modules

【解决方案1】：

通过脚本标签加载把手会将其公开为 UMD（通用模块定义）。这只是意味着库的所有功能都通过全局变量公开。对于您提供的库链接，主全局变量似乎是 Handlebars。

如果您想将把手作为 CommonJS/ES6 模块直接导入脚本，则需要使用构建工具，例如 Webpack。

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

【讨论】：