Question

我在使用Node npm安装把手时遇到问题，并且一般都了解如何使用require（）。

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

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

npm install handlebars

npm install require

 <!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和browserify等工具允许您在浏览器中使用AMD模块（前提是它们不依赖于浏览器不支持的功能）。

或者，您可以按照install instructions进行凉亭或手动安装，获得设计用于浏览器的车把版本。

使用npm

1 个答案: