使用 npm 安装 Handlebars.js 问题

Question

我在使用 Node npm 安装 handlebars 时遇到问题，并且大体上了解如何使用 require()。

似乎根本没有安装 Handlebars 模块。

在 WebStorm 终端中，我成功安装了以下内容：

npm 安装把手

npm 安装需要

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todo App: Vanilla JS, Bootstrap, Handlebars</title>
</head>
<body>
    <ul class="shoesNav">
        <script id="body-template" type="x-handlebars-template">
            {{#each this}}
                <li class="shoes">{{name}} -- Price: {{price}}</li>
            {{/each}}
        </script>
    </ul>
    <script type="text/javascript">
        var Handlebars = require('handlebars');
        var shoesData = [{name:"Nike", price:199.00 }, {name:"Loafers", price:59.00 }, {name:"Wing Tip", price:259.00 }];
        //Get the HTML from the template   in the script tag
        var theTemplateScript = document.getElementById("body-template").innerHTML;
        alert(theTemplateScript);
        //Compile the template
        var theTemplate = Handlebars.compile(theTemplateScript);
        document.getElementsByClassName("shoesNav")[0].appendChild(theTemplate);

        //We pass the shoesData object to the compiled handleBars function
        // The function will insert all the values from the objects in their respective places in the HTML and returned HTML as a string. Then we use jQuery to append the resulting HTML string into the page
    </script>
</body>
</html>

├─┬ handlebars@4.0.5
│ ├── async@1.5.0
│ ├─┬ optimist@0.6.1
│ │ ├── minimist@0.0.10
│ │ └── wordwrap@0.0.3
│ ├─┬ source-map@0.4.4
│ │ └── amdefine@1.0.0
│ └─┬ uglify-js@2.6.1
│   ├── async@0.2.10
│   ├── source-map@0.5.3
│   ├── uglify-to-browserify@1.0.2
│   └─┬ yargs@3.10.0
│     ├── camelcase@1.2.1
│     ├─┬ cliui@2.1.0
│     │ ├─┬ center-align@0.1.2
│     │ │ ├─┬ align-text@0.1.3
│     │ │ │ ├─┬ kind-of@2.0.1
│     │ │ │ │ └── is-buffer@1.1.0
│     │ │ │ ├── longest@1.0.1
│     │ │ │ └── repeat-string@1.5.2
│     │ │ └── lazy-cache@0.2.7
│     │ ├─┬ right-align@0.1.3
│     │ │ └─┬ align-text@0.1.3
│     │ │   ├─┬ kind-of@2.0.1
│     │ │   │ └── is-buffer@1.1.0
│     │ │   ├── longest@1.0.1
│     │ │   └── repeat-string@1.5.2
│     │ └── wordwrap@0.0.2
│     ├── decamelize@1.1.1
│     └── window-size@0.1.0
└─┬ require@2.4.20
  ├── std@0.1.40
  └─┬ uglify-js@2.3.0
    ├── async@0.2.10
    ├─┬ optimist@0.3.7
    │ └── wordwrap@0.0.3
    └─┬ source-map@0.1.43
      └── amdefine@1.0.0

Answer 1

浏览器不支持 AMD 语法（如 require）。

您已经在 Node.JS 中安装了旨在运行的模块，而不是嵌入在 HTML 文档中并提供给浏览器。

webpack and browserify 等工具可让您在浏览器中使用 AMD 模块（前提是它们不依赖于浏览器不支持的功能）。

或者，您可以按照 install instructions 进行 bower 或手动安装，获得专为在浏览器中使用而设计的 handlebars 版本。

使用 npm 安装 Handlebars.js 问题

Issue installing Handlebars.js with npm

javascript

node.js

handlebars.js