2

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

我到处阅读，但我无法找出 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'
                ]
            }
        }
    };
};

这里是我需要库的第一个观点：

'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文件中编译。编译它们的最佳/正确方法是什么？最好有两个单独的文件？库和应用程序？是否可以使用 npm 中的库只处理一个文件？

4

0 回答 0