在车把模板中包含 js 模块答案

【问题标题】：include js module in handlebars template在车把模板中包含 js 模块
【发布时间】：2018-07-25 19:20:10
【问题描述】：

我有以下文件：

server.js：

app.get('/main/:id', function(req, res) {
    res.render('main', { products: products });
})

main.hbs：

<div class="products">
    {{#each products }}
        {{ this.product_id }}
        {{ this.product_name }}
    {{/each}}
</div>


<script>
$(document).ready(function() {
    $(".add-to-cart").click(function() {
        const products = {
            item_id: $(this).attr('item_id'),
            item_name: $(this).attr('item_name'),
        }

        shopping_cart = new ShoppingCart();
        shopping_cart.addtoCart(products);
    })
})
</script>

脚本/shopping_cart.js：

function ShoppingCart() {
    this.addtoCart = function(products) {
        //save products to server etc..
    }
}

module.exports = ShoppingCart;

我唯一的问题是我试图在 main.hbs 文件中包含 shopping_cart 脚本，但没有成功

一开始我是在 main.hbs 中做的：

<script src="../scripts/shopping_cart.js"></script>

但我在浏览器中收到错误：“未捕获的 ReferenceError：模块未定义”

我尝试将它打包成一个 bundle.js 文件：我没有错误，但是如果我单击“添加到购物车”按钮，我会得到： “未捕获的 ReferenceError：未定义 ShoppingCart”

请帮助我了解如何包含 shopping_cart.js 文件并能够创建该类的新实例的正确方法。

谢谢。

【问题讨论】：

标签： javascript node.js express handlebars.js

【解决方案1】：

你遇到了一个非常典型的绊脚石，很多人在开始使用前端 + 后端 js 时都会遇到这个绊脚石。

module.exports 是 nodejs 代码，在浏览器中不起作用。您需要使用普通 JavaScript 编写 shopping_cart.js，而不使用 nodejs 函数和对象。在这种情况下，您应该能够简单地省略module.exports。但这感觉像是一个更大的混乱问题。

您应该分别研究 JavaScript 和 nodejs，尤其是如果您不熟悉其中之一/两者。虽然有些组件可以共享，但遗憾的是它比简单的module.exports 复杂一些。我建议先查看一些香草前端（浏览器）JavaScript 教程，因为它没有 module.exports 或 require('...') 之类的概念。

【讨论】：