Merge multiple browserify bundles in one stream

i'm working on a big web application. I'm using Gulp to build javascript files and Browserify.

The problem is that when i'm in development mode, it takes so much time to rebuild my javascript bundle each time i make changes (using watch)

For my application, i need to package all javascript files in one file with a special order:

  • all vendors files (including bootstrap jquery etc..)
  • some files that need to be browserified (using commonJS style on it with require('...'); )
  • some files that need to be browserified and babelified ( .jsx files)
  • As i do not want to wast time between files saves waiting for browserify to bundle all files (average 20-25 seconds...), i decided to split the flow with 3 bundles that are built async and then merge all that 3 temporary bundles to one. (in this way, it takes only 15sec for the first build and if i make one change in a file with watchify, it takes only 2 seconds to being rebuilt instead of 20sec).

    My problem, is that when i was using only one pipe to bundle the final file, using browserify and debug: true option, i had access to all sources files separatly in the chrome developper console, thanks to browserify debug option because there was only one sourcemap file generated.

    But now with 3 pipes, each pipe builds its own sourcemap, and when i merge the 3 temp bundles in the final one, with gulp-sourcemaps plugin and loadMaps: true option, an error occured on the web browser console (so the app doesn't works). And if i turn off debug: true on browserify options, it works correctly, but i can't debug each JS files separalty. I have only the big 100K lines final file...

    Did someone could help me having the correct sourcemap please ?

    here is the kind of error thrown

    if (file.isNull() || file.sourceMap) {
                 ^
    
    TypeError: Object (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);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.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})({ 
    has no method 'isNull'
        at DestroyableTransform.sourceMapInit [as _transform] (/space/iadvize.com/Deploy/releases/20151230085529/desk/node_modules/gulp-sourcemaps/index.js:20:14)
    

    Due to this error, i can't merge the sourcemaps generated by all browserify bundles.

    链接地址: http://www.djcxy.com/p/32960.html

    上一篇: 使用browserify创建反应应用程序有错误

    下一篇: 在一个流中合并多个浏览器包