ref @alterx's choo starter project:

https://github.com/alterx/choo-browserify-beaker-starter/blob/8dafff279ce75f536dff4bbc5d80c0d7bb797c42/index.js#L21-L31

i think aliasify looks for require() calls in the source and rewrites them, so i'm not sure what we can do to fix this. worth investigating anyway.

Should unshift this plugin to the 'pack' label, and do the same on 'factor.pipeline' event, I think we're already good then.

I'm having trouble getting split-require with a ES2015 + JSX project to work (cf. minimal example project). It fails bundling dynamic import + JSX code.

I was not able to track down the issue to the babel transform for dynamic import or split-require. Both seem to work fine alone but fail when being combined.

Test

import('./external').then(function(result) {
  console.log(result);
});


var app = <div></div>;

Error

❯ npm test
> @ test ~/Projects/split-require-jsx-text
> browserify index.js -t [ babelify ] -p [ split-require --dir dist ] -o dist/index.js
~/Projects/split-require-jsx-text/node_modules/split-require/plugin.js:327
    var requirePath = node.arguments[0].arguments[0].value
                                                 ^
TypeError: Cannot read property '0' of undefined
    at processSplitRequire (~/Projects/split-require-jsx-text/node_modules/split-require/plugin.js:327:50)
    at ~/Projects/split-require-jsx-text/node_modules/split-require/plugin.js:144:11
    at walk (~/Projects/split-require-jsx-text/node_modules/transform-ast/index.js:82:5)
    at walk (~/Projects/split-require-jsx-text/node_modules/transform-ast/index.js:78:9)
    at walk (~/Projects/split-require-jsx-text/node_modules/transform-ast/index.js:74:13)
    at walk (~/Projects/split-require-jsx-text/node_modules/transform-ast/index.js:78:9)
    at walk (~/Projects/split-require-jsx-text/node_modules/transform-ast/index.js:74:13)
    at walk (~/Projects/split-require-jsx-text/node_modules/transform-ast/index.js:78:9)
    at walk (~/Projects/split-require-jsx-text/node_modules/transform-ast/index.js:78:9)
    at walk (~/Projects/split-require-jsx-text/node_modules/transform-ast/index.js:78:9)
npm ERR! Test failed.  See above for more details.

I'm seeing some really strange behavior when using split-require together with tinyify. I am trying to conditionally load a large library for browser that don't support window.crypto.subtle like this:

var splitRequire = require('split-require')

module.exports = bindCrypto

var cryptoProvider = window.crypto && window.crypto.subtle
  ? getWebCrypto()
  : getForgeCrypto()

function bindCrypto (consumerFn) {
  return function () {
    var args = [].slice.call(arguments)
    return cryptoProvider
      .then(function (cryptoImplementation) {
        return consumerFn.apply(cryptoImplementation, args)
      })
  }
}

function getWebCrypto () {
  return Promise.resolve(require('./web-crypto'))
}

function getForgeCrypto () {
  return new Promise(function (resolve, reject) {
    splitRequire('./forge-crypto', function (err, forgeCrypto) {
      if (err) {
        return reject(err)
      }
      resolve(forgeCrypto)
    })
  })
}

This works as expected, but strangely I noticed that some time early September 2020 it looks like the splitRequire call passes an empty object ({}) to the function instead of the module's export.

However this only happens when I apply tinyify to the code above. If I leave it unminified, I will be passed the correct export. It does not seem to matter if the chunk that is split off is minified or not.

Quite frankly, this does not make any sense to me considering that it used to work and broke without any intervention (I am aware of) apparently, so I would be happy if anyone has any hint about how to even debug this?

For the sake of completeness this is how I bundle things:

var transforms = JSON.parse(JSON.stringify(pkg.browserify.transform))
var b = browserify({
  entries: './index.js',
  // See: https://github.com/nikku/karma-browserify/issues/130#issuecomment-120036815
  postFilter: function (id, file, currentPkg) {
    if (currentPkg.name === pkg.name) {
      currentPkg.browserify.transform = []
    }
    return true
  },
  transform: transforms.map(function (transform) {
    if (transform === '@offen/l10nify') {
      return ['@offen/l10nify', { locale: locale }]
    }
    return transform
  })
})

b.on('split.pipeline', function (pipeline) {
  tinyify.applyToPipeline(pipeline)
})

return b
  .exclude('dexie')
  .plugin('tinyify') // commenting out this line makes things work, but I end up with non-minified code
  .plugin('split-require', {
    dir: dest,
    filename: function (entry) {
      return 'chunk-' + entry.index + '.js'
    },
    sri: 'sha384',
    output: function (bundleName) {
      var buf = ''
      return to(onwrite, onend)

      function onwrite (chunk, enc, cb) {
        buf += chunk
        cb()
      }

      function onend (cb) {
        var hash = crypto.createHash('sha1').update(buf)
        var name = bundleName.replace(/\.js$/, '') + '-' + hash.digest('hex').slice(0, 10) + '.js'
        this.emit('name', name)
        fs.writeFile(dest + name, buf, cb)
      }
    }
  })
  .bundle()
  .pipe(source('index.js'))
  .pipe(buffer())
  .pipe(gap.prependText('*/'))
  .pipe(gap.prependFile('./../banner.txt'))
  .pipe(gap.prependText('/**'))
  .pipe(rev())
  .pipe(gulp.dest(dest))
  .pipe(rev.manifest(dest + 'rev-manifest.json', { base: dest, merge: true }))
  .pipe(gulp.dest(dest))

I tried to use the --out CLI option as described in the README: https://github.com/goto-bus-stop/split-require#--out

browserify app/index.js -p [ split-require --out dist ]
browserify app/index.js -p [ split-require --out ./dist/ ]

Nothing worked. Also I checked the source and cannot find the out option being used. The only option In found is dir:

I tried with the --dir option and it worked !

browserify app/index.js -p [ split-require --dir ./dist/ ]

Do you need to update the docs ?

Hi, I'm trying to setup browserify+babel+split-require, but I keep receiving an undefined request:

As far as I have checked, load.b is a empty object, this is why url is undefined.

Here is my code

document.addEventListener('DOMContentLoaded', () => {
  splitRequire('./test', function() {
    console.log(arguments);
  });
});

And Here is how the browserify script is setup:
browserify ./source/js/index.js -t [ babelify --plugins dynamic-import-split-require ] -p [split-require --out './dist/js/%f'] > ./dist/js/bundle.js

I've checked the output files and seems ok:

bundle.js
bundle.3.js

Here is the splitRequire on bundle.js

document.addEventListener('DOMContentLoaded', function () {
  splitRequire(3, function () {
    console.log(arguments);
  });
});

Compiled bundle.js: https://pastebin.com/B2WUKe3n

Could someone help me : ) ?
Thanks

I'm new to Browserify and trying to use this to code split some routes. So far everything works as expected (I'm using the package.json scripts)

"scripts": {
    ...
    "build:js": "NODE_ENV=production browserify index.js -p [ split-require --dir static/ --public static/ ] | uglifyjs -c > static/bundle.js",
    "build": "npm run build:css && npm run build:js",
    ...
  },

There's only one thing I noticed: the generated bundles aren't uglified (of course, I'm just uglifying the result of browserify index.js).

Is there a way to uglify the results of this plugin?

can just do pipeline.pipe(outputStream(bundle)) instead of pipeline.pipe(fs.createWriteStream(outputName(bundle))).

one thing to consider is the mapping of entry point IDs to publically accessible URLs, maybe will have to generate the dynamic bundle names up front again so the mapping can be added into the main bundle in time. may have to remove the async outname option, which can be used to generate hash-based filenames for dynamic bundles, but i think that's probably ok and it was clumsy to use anyway.

so you can generate script tags for everything that is needed to render the page.

maybe having an api like splitRequire.capture(function (cb) { render(cb) }, function (result, bundles) {}) could be cool; could use the new async_hooks probably.

this works:

import('./a')

but what do we do with

var a = './a' + Math.random()
import(a)

I'm building a PWA with Choo using asynchronous components and given that I'm using promises to deal with those it would be interesting if split-require could return a promise rather that using callbacks only. Something like:

const splitRequire = require('split-require')

splitRequire('./SomeComponent').then(SomeComponent => { ... }) // promise
splitRequire('./SomeComponent', (err, SomeComponent) => { ... }) // callback

instead of comparing bundle outputs, run tests in a browser and check that things actually work.

bundle outputs are annoying to update, if the runtime changes a single line every test needs to change :(

need to set .crossOrigin and .integrity properties on the script tags in the browser runtime.

split-require assumes indexDeps exist on files, but it looks like they don't when browserify is run with --full-paths.

I had to manually install flush-write-stream to get split-require working.

It is required here : https://github.com/goto-bus-stop/split-require/blob/master/plugin.js#L7

Hi!

I'm a little confused by the combination of split-require and factor-bundle in tandem.

Is it possible for split-require to emit all files so they can be passed to factor-bundle ahead of time?
Looking at the events it seems that split-require already leaves out dependencies from the main entry from the dynamic imports, but is it possible somehow to use factor bundle to take out all external dependencies?

In my test it seems factor.pipeline emits before split.pipeline, so I can't inject factor bundle later?

So my main entry file will contain a lot of shared dependencies, but a subset of my dynamic imports will also share dependencies. I'm trying to get a setup with hash based file naming so that all files are renamed to their hash and I can serve them with Cache-Control: Immutable, where npm dependencies will likely change very rarely, while my source files will sometimes change.