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

<强> fix_browserify

require=

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

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

如果我发现任何更好的解决方案，我会更新这个答案。

<强>更新

在查看了browerify如何工作之后我最终放弃了grunt / browserify，只是选择了更容易设置的早午餐，并且当事情发生变化时也会更快地重建。虽然不是一个笨拙的替代品，但它构建了我需要的一切。

Answer 2

快速解决方案

我们通过确保在连接之前确保每个文件中的JS包以分号结尾（如Keven Wang mentioned）来修复此错误。

browserify：连接的浏览器文件=＆gt;错误_prelude.js与加载单独的文件工作

2 个答案:

快速解决方案

更多信息