browserify:连接的浏览器文件=>错误_prelude.js与加载单独的文件工作

Question

连接两个浏览器化文件(vendor.js和app.js到combined.js)时遇到问题

在浏览器中加载combined.js会在_prelude.js中抛出以下内容:

Uncaught Error: Cannot find module 'function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}'

单独加载浏览器化文件时工作得很好.

我错过了什么？
(如果您需要更多配置,请告诉我,很高兴提供)

谢谢你的帮助!

在Gruntfile.js中:

browserify: {
        vendor: {
            src: ['client/requires/**/*.js'],
            dest: 'build/vendor.js',
            options: {
                shim: {
                    jquery: {
                        path: 'client/requires/jquery/js/jquery.js',
                        exports: '$'
                    },
                    underscore: {
                        path: 'client/requires/underscore/js/underscore.js',
                        exports: '_'
                    },
                    backbone: {
                        path: 'client/requires/backbone/js/backbone.js',
                        exports: 'Backbone',
                        depends: {
                            underscore: 'underscore'
                        }
                    },
                    'backbone.marionette': {
                        path: 'client/requires/backbone.marionette/js/backbone.marionette.js',
                        exports: 'Marionette',
                        depends: {
                            jquery: '$',
                            backbone: 'Backbone',
                            underscore: '_'
                        }
                    },
                    eventsource: {
                        path: 'client/requires/eventsource/eventsource.js',
                        exports: 'EventSource'
                    },
                    moment: {
                        path: 'client/requires/moment/moment.js',
                        exports: 'moment'
                    },
                    bootstrap: {
                        path: 'client/requires/bootstrap/js/bootstrap.js',
                        exports: null
                    }
                }
            }
        },
        app: {
            files: {
                'build/app.js': ['client/src/main.js']
            },
            options: {
                transform: ['node-underscorify'],
                debug: true,
                external: ['jquery', 'underscore', 'backbone', 'backbone.marionette', 'eventsource', 'moment', 'bootstrap']
            }
        },
    },

    concat: {
        'build/<%= pkg.name %>.js': ['build/vendor.js', 'build/app.js']
    },

Answer 1

我已经做了一些初步调查，序言似乎存在明确的问题。我向 grunt-browserify 维护者提出了一个问题，让我们看看会发生什么。

现在，我在vendor.js和app.js之间连接一个文件，作为修复序言的方法，如下所示：

Gruntfile.js

concat: {
        'build/<%= pkg.name %>.js': ['build/vendor.js', 'client/src/fix_browserify', 'build/app.js']
    },

修复浏览器

require=

注意上述文件中没有回车或换行

我不确定定义两次是否会产生任何意想不到的后果require，但它似乎在我有限的使用中起作用。如果您有多个应用程序包，那么您同样需要fix_browserify在每个应用程序包之前交错连接文件。

如果我知道有更好的解决方案，我会更新这个答案。

更新

在研究了 browerify 的工作原理后，我最终放弃了 grunt/browserify，只选择了 brunch，它更容易设置，并且在情况发生变化时重建速度也更快。虽然不是一个简单的替代品，但它构建了我需要的一切。