在车把模板中包含js模块

Question

I have the following files:

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>

scripts/shopping_cart.js:

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

module.exports = ShoppingCart;

The only problem i have is that i'm trying to include the shopping_cart script" in the main.hbs file without any success

at first i did in the main.hbs:

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

but than i got the error in the browser: "Uncaught ReferenceError: module is not defined"

than i tried to webpack it into a bundle.js file: and i got no error but if i click the "add to cart" button i get: "Uncaught ReferenceError: ShoppingCart is not defined"

Please help me to understand the right approach how to include the shopping_cart.js file and be able to create new instance of the class.

thanks.

Answer 1

You're tripping over a very typical stumbling block that a lot of people trip over when starting out with frontend + backend js.

module.exports is nodejs code, it will not work in the browser. You will need to write your shopping_cart.js in normal JavaScript without using nodejs functions and objects. In this case you should be able to simply ommit the module.exports . But this feels like a bigger issue of confusion.

You should look into JavaScript and nodejs separately, especially if you are new to either/both. While some components can be shared, it's a bit more complex than a simple module.exports sadly. I would suggest looking into some vanilla frontend (browser) JavaScript tutorials first, as it has no concept of things like module.exports or require('...') .