Grunt-browserify external libs give: Cannot find module

363 Views Asked by At

I'm working on app with Backbone Marionette and i'm building my files with grunt-browserify 3.8. Backbone, Marionette, underscore and jQuery are added with npm. I'm compiling all my files in one single file. Everything was working fine but the build was extremly slow (like 1.5mins) so i read about using external config option in grunt-browserify. Now the build is quite fast but when i access to the page i got: Uncaught Error: Cannot find module 'underscore' to the line when i first use my require function

I read everywhere but i cannot figured out the correct configuration for grunt-brwoserify.

Here is my GruntFile:

'use strict';

module.exports = function (grunt) {
    require('grunt-config-dir')(grunt, {
        configDir: require('path').resolve('tasks')
    });
    require('jit-grunt')(grunt);
    // show elapsed time at the end
    require('time-grunt')(grunt);

    grunt.registerTask('i18n', [ 'clean', 'dustjs', 'clean:tmp' ] ); // not used for now

    grunt.registerTask('build', ['i18n', 'less', 'cssmin', 'browserify', 'concurrent:build'] );

    grunt.registerTask('serve', [ 'build', 'concurrent:server'] ); // Build & run the server locally, for development.

};

Here my Browserify task:

'use strict';


module.exports = function browserify(grunt) {
    // Load task
    grunt.loadNpmTasks('grunt-browserify');

    // Options
    return {
        build: {
            files: {
                '.build/js/theme-smarty.js':  ['public/js/assets/smarty-themeApp/plugin/jquery.min.js', 'public/js/assets/smarty-themeApp/**/*.js'],
                '.build/js/app-bundled.js':   ['public/js/app.js'],
                '.build/js/landing-page.js':  ['public/js/landing-page.js']
                // '.build/js/app-admin-bundled.js': ['public/js/app-admin.js']
            },
            options: {
                // activate watchify
                watch: true,
                watchifyOptions: {
                    spawn: false
                },
                include: [
                    'public/js/**/*.js'
                ],
                transform: [['babelify', {'presets': 'es2015', 'compact': false}]],
                external: [
                    'backbone',
                    'underscore',
                    'jquery',
                    'backbone.marionette'
                ]
            }
        }
    };
};

And here my first views where i require libs:

'use strict';

const
    _ = require('underscore'),
    $ = require('jquery'),
    Backbone = require('backbone'),
    Marionette = require('backbone.marionette'),
    MainRouter = require('./main-router'),
    MainController = require('./main-controller');
Backbone.$ = $;

let View = Marionette.LayoutView.extend({
    template: require('./main-page.dust'),

    regions: {
        mainContainer: '.main-container',
        modalContainer: '.modal-container'
    },

    initialize: function () {
            this.model = new Backbone.Model({
            page: this.$el.data('page')
        });

        new MainRouter({
            controller: new MainController({
                mainContainer: this.mainContainer,
                modalContainer: this.modalContainer
            })
        });
    },

    onRender: function () {
        Backbone.history.start({pushState: true});
    }

});

module.exports = View;

Look like libs are not even compiled in my app-bundled.js files. What's the best/correct way to compile them? Is better to have two separate files? libs and app? Is possible to do with just one file using libs from npm?

0

There are 0 best solutions below