Question

我正在使用Backbone Marionette开发app，我正在用grunt-browserify 3.8构建我的文件。使用npm添加Backbone，Marionette，下划线和jQuery。我正在一个文件中编译我的所有文件。一切都工作正常，但构建速度非常慢（如1.5分钟）所以我读到了在grunt-browserify中使用external配置选项。现在构建速度非常快，但是当我访问页面时，我得到了：当我第一次使用我的require函数时，Uncaught Error: Cannot find module 'underscore'到了该行

我到处读，但我无法弄清楚grunt-brwoserify的正确配置。

这是我的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.

};

这是我的Browserify任务：

'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'
                ]
            }
        }
    };
};

这是我第一次看到我需要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;

看起来在我的app-bundled.js文件中甚至没有编译库。编译它们的最佳/正确方法是什么？最好有两个单独的文件？ libs和app？可以使用npm中的libs只使用一个文件吗？

Grunt-browserify外部库提供：找不到模块

0 个答案: