8

连接两个浏览器化文件（vendor.js 和 app.js 到 combine.js）时遇到问题

在浏览器中加载 combine.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']
    },
4

2 回答 2

2

我已经进行了一些初步调查，序言似乎存在明确的问题。我已经向 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，只使用了 brunch，它更容易设置，并且在事情发生变化时重建速度也更快。虽然不是一个笨拙的替代品，但它构建了我需要的一切。

于 2014-02-24T02:59:30.590 回答
2

快速解决方案

我们通过确保每个文件中的 JS 包以分号结尾来修复此错误，就像Keven Wang 提到的那样，在被连接之前。

更多信息

在撰写本文时，如果您启用了生成源映射（由选项控制） ，Browserify 会省略分号（可能是由于这个问题） 。如果我们不提供此选项，Browserify 会添加分号，并且连接后不会出现错误。debug

无论默认行为是什么 - 省略或附加分号（参见这个问题- 有时您想将输出包装在表达式中，所以不想要分号）似乎都会引起问题。这也很大程度上取决于您的构建管道，因为我们在另一个项目中没有错误，构建过程略有不同，通过 Grunt 的uglify任务运行输出，剥离源映射，并在末尾添加分号。

我认为 Andrew 添加间隔文件的解决方案是不必要的 hacky，并且有更好的解决方案可用于在连接捆绑包之前确保输出符合您的预期（即末尾带有分号）。

于 2016-03-19T06:17:03.583 回答