Guide on importing a client-side script using browserify with module.exports exposed through jadeify

Question

Guide on importing a client-side script using browserify with module.exports exposed through jadeify

I've successfully created a JavaScript file using a Jade template with the help of browserify, browserify-middleware, and jadeify on the server side in Node. The only thing required to generate the JavaScript file is:

app.use('/templates', require('browserify-middleware')('./public-includes'),
{
    grep: /\.jade$/,
    transform: ['jadeify']
}));

Now, when I try to access the generated JavaScript code from /templates/template.jade in the web browser (I have provided an example here), I can see that it sets various functions on module.exports similar to what we do in Node. However, my challenge lies in using this on the client side. I attempted to use require.js like so -

var template = require('/templates/template.jade', function(template){});

, but it returned undefined.

Do I need to utilize browserify on the client-side as well? Most examples discuss bundles, but since I run it on a directory without specifying a bundle name, I'm unsure if the same principles apply.

javascript express requirejs pug browserify

Answer 1

Answer №1

It is highly recommended to implement browserify across all platforms. Simply create a file named client.js that contains:

var template = require('./templates/template.jade');
// add the rest of your code here

Next, on the server side, include:

app.get('/client.js', require('browserify-middleware')('./client.js',
{
    transform: ['jadeify']
}));

In your HTML file, just insert:

<script src="/client.js"></script>

If you prefer an alternative method using requirejs or creating a standalone global variable, you can try:

app.get('/templates', require('browserify-middleware')('./public-includes'),
{
    grep: /\.jade$/,
    transform: ['jadeify'],
    standalone: 'template'
}));

This should result in either a declared global variable called template on the client side, or it can function with requirejs as shown below:

require('/templates/template.jade', function (template) {
  //use template here
});

If you are not familiar with requirejs, results may vary. However, it is strongly suggested to utilize browserify for all projects.

Answer 2

It is highly recommended to implement browserify across all platforms. Simply create a file named client.js that contains:

var template = require('./templates/template.jade');
// add the rest of your code here

Next, on the server side, include:

app.get('/client.js', require('browserify-middleware')('./client.js',
{
    transform: ['jadeify']
}));

In your HTML file, just insert:

<script src="/client.js"></script>

If you prefer an alternative method using requirejs or creating a standalone global variable, you can try:

app.get('/templates', require('browserify-middleware')('./public-includes'),
{
    grep: /\.jade$/,
    transform: ['jadeify'],
    standalone: 'template'
}));

This should result in either a declared global variable called template on the client side, or it can function with requirejs as shown below:

require('/templates/template.jade', function (template) {
  //use template here
});

If you are not familiar with requirejs, results may vary. However, it is strongly suggested to utilize browserify for all projects.

Guide on importing a client-side script using browserify with module.exports exposed through jadeify

Answer №1

Similar questions

Unable to find the Popper component in Material UI

The information is not appearing in the dropdown menu

Determine the index of a specific character within a string using a "for of" loop

Enforcing the autocompletion selection in jQuery UI

Once the div content is reloaded using AJAX, the refreshed HTML suddenly vanishes

Changing innerHTML in CoffeeScript

Load the content of the dialog and transfer variables

Issue with Node.js/Redux/Express framework

How to retrieve data from a JavaScript array in a separate JavaScript file

Navigate through a given value in the event that the property undergoes a name change with each

What could be causing the embedded dropdown to automatically select the initial option every time?

What is the best way to repurpose the vuex module for multiple components?

Ways to forward a parameter to a different web address?

Using Regular expressions in JavaScript to eliminate content between two HTML comment tags

Displaying all components simultaneously instead of displaying placeholders and awaiting image downloads

Having trouble accurately obtaining the height of a DIV element using jQuery

Prevent anchor link click and drag functionality on an HTML page / Swipe through a container containing links

Highlighting a Table Column with a Radio Button

Modeling with Sequelize and express-session

Variable scope not properly maintained when there is a change in the Firebase promise