Browsify: merged browser files => _prelude.js error and loading individual files

Question

Running a problem when merging two files in a browser (vendor.js and app.js into merged .js)

Downloading comb.js in the browser calls the following in _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}' 

When downloading monitored files, it individually works fine.

What am I missing?
(let me know if you need more configs, we are pleased to provide)

Thank you for your help!

In the Gruntfile.js file:

 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

I did some initial research and there seems to be a specific problem with the preamble. I raised a problem with supporting grunt browsers, so let's see what came of it.

So far I am concatenating the file between vendor.js and app.js as a way to fix the preamble as follows:

Gruntfile.js

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

fix_browserify

 require= 

Please note that in the above file there is no carriage return or line feed

I'm not sure if there will be any unintended consequences of defining require twice, but it seems to work in my limited use. If you have more than one application package, you will also need to alternate the consolidation of the fix_browserify file before each of the packages.

If I find out about any better solutions, I will update this answer.

UPDATE

In the end, I ran into a grunt / browser, seeing how browerify works, and just went with a brunch that was much easier to set up and also recover much faster when something changes. Despite the fact that it does not require replacement, it builds everything I need.

Answer 2

Fast decision

We fixed this error by making sure that the JS package in each file ends with a semicolon, such as Keven Wang , before being merged.

Additional Information

It seems that from the moment of writing, Browserify skips half an hour (perhaps due to this problem ) if you turned on the generation of source maps (controlled by the debug option). If we do not provide this option, Browserify will add a semicolon and there will be no errors after concatenation.

It seems that there are problems caused by the fact that the default is lowering or adding a semi-colony (see this problem - sometimes you want to wrap the output in an expression, so you don't want a semicolon). It also depends a lot on your build pipeline, since we did not have errors in another project with a slightly different build process that ran the result using the Grunt uglify , cutting off the source maps and adding a half-point at the end.

I think Andrew’s decision to add a separator file is unnecessarily hacky, and there are better solutions available to provide the output, as you expect (i.e., with half-columns at the end), before concatenating the packets.