browserify source map not working if require underscore

问题

I use browserify for my angular client app. I need to use underscore. angular is installed with bower and underscore is installed with npm

This is how I run browserify (npm) and create source map in gulp (npm)

gulp.task('browserify', function() {
    return browserify(dir.script_from + '/main.js', {debug: true})
        .bundle()
        .pipe(source('bundle.js')) // gives streaming vinyl file object
        .pipe(buffer()) // <----- convert from streaming to buffered vinyl file object
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(uglify()) // now gulp-uglify works
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(dir.script_to));
});

In my main.js, I have

//require('underscore')
require('angular')
require('angular-resource')
require('angular-route')
require('./home/home_page.js')
...

if I don't require('underscore'), the source map is working. I can view the original files and set breakpoints.

But if I require('underscore'), source map is not working anymore. I can't even view the files.

I also tried installing underscore with bower, but i get the following error:

[23:59:02] Starting 'browserify'...
events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: Cannot find module 'underscore' from '/Users/[my path]/app/client/script'

Note that both bower (I config'ed the path) and npm put modules in '/Users/[my path]/node_modules' folder

I even tried a main.js with only one line: require('underscore') and not working, but empty main.js file works

回答1:

I am having the same issue with underscore/browserify. Maybe a better way is to exclude it in the bundle. Just have a <script> tag linking to your underscore file. And in the bundle you can use _ directly.

If you are using angular, it's recommended to use a separate <script> as well, since most users probably already have angular available from CDN for another angular website.

回答2:

gulp is checking underscore in your root directory. Try adding path of underscore in config.js or in package.json

config.js

require: ['node_modules/underscore']

package.json

"underscore": "./node_modules/underscore"

来源：https://stackoverflow.com/questions/31055660/browserify-source-map-not-working-if-require-underscore

标签

angularjs

underscore.js

browserify