How can I use require js files after concatenating and minifying

Question

I am using requirejs in my project and each module has a js file using require calls to make use of libraries/components. Following is sample code :-

require(["modernizr",
"jquery",
"bootstrap",
"handlebars",
"bootstrap-table",
], function(modernizr, $, bootstrap, Handlebars, bootstrapTable) {

$(document).on('click', '#searchBtn', function(e){
    search();
});

$('#table').bootstrapTable({
    classes: 'table table-no-bordered',
    striped: true,
    iconsPrefix: 'fa',
    responsive: true,
    responsiveBreakPoint: 768,
    responsiveClass: "bootstrap-table-cardview",
    undefinedText: "",
    showFooter: true,
    columns: columns(),
    data: data(),
});
}

I want to minimize the number of js calls in the browser while page load.

(I am aware of r.js but would like to avoid it as it requires me change my project folder structure)

So I am thinking of concatenating and minifying all library/component js files like jquery, bootstrap etc. using grunt and then require them in module specific files.

If I do so, I wanted to know how I can include the same using require and be able to use jquery($) and bootstrapTable the way I am using now?

I tried the following but it does not seem to be working :-

require(["mainjs"], function(mainjs) {

mainjs(document).on('click', '#searchBtn', function(e){
    search();
});

mainjs('#table').mainjs({
    classes: 'table table-no-bordered',
    striped: true,
    iconsPrefix: 'fa',
    responsive: true,
    responsiveBreakPoint: 768,
    responsiveClass: "bootstrap-table-cardview",
    undefinedText: "",
    showFooter: true,
    columns: columns(),
    data: data(),
});
}

Following is my project structure :-

my-proj
build
src
    app
        components
            selectpicker
                selectpicker.hbs
                selectpicker.js
                selectpicker.less
            calendar
                calendar.hbs
                calendar.js
                calendar.less
            ...
            ...
            ...
        page
            homepage
                homepage.html
                homepage.js
            transacations
                transactions.html
                transactions.js
            ...
            ...
            ...
    assets
        images
        js
            jquery.js
            modernizr.js
            handlebar.js
            require.js
            bootstrap.js
            moment.js
            ...
            ...
            ...
        less
Gruntfile.js
package.json

Answer 1

You can use webpack:

Create a file webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

and your code file src/index.js :

const modernizr = require("modernizr");
const $ = require("jquery");
const bootstrap = require("bootstrap");
const Handlebars= require("handlebars");
const bootstrapTable = require("bootstrap-table");

$(document).on('click', '#searchBtn', function(e){
    search();
});

$('#table').bootstrapTable({
    classes: 'table table-no-bordered',
    striped: true,
    iconsPrefix: 'fa',
    responsive: true,
    responsiveBreakPoint: 768,
    responsiveClass: "bootstrap-table-cardview",
    undefinedText: "",
    showFooter: true,
    columns: columns(),
    data: data(),
});

Then run the command line program webpack in your project directory. This will create a file called dist/bundle.js, which includes your project code as well as all used libraries inside one file.

You can also tell webpack to minify the entire code, using the following configuration. This will also minify all used dependencies inside the destination file.

const webpack = require("webpack");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: new UglifyJsPlugin({
      include: /\.min\.js$/
    })
  }
};