Feeling frustrated trying to find a straightforward way to share code, required via NPM, across multiple Browserify or Webpack bundles. Is there a concept of a file "bridge" that can help?
I'm not concerned about compile time (I know about watchify), but rather I want to separate all vendor specific libraries into vendor.js to keep the size of my app.js down and prevent browser crashes from huge sourcemaps. It also makes it cleaner for viewing the compiled js code if needed. So here's what I have:
// vendor.js
require('react');
require('lodash');
require('other-npm-module');
require('another-npm-module');
It's crucial that the code is loaded from NPM rather than Bower or saved in a 'vendor' directory for import via relative paths and identification through a shim. I want every library reference to come from NPM except for my actual application source.
In app.js, I store all my source code, and using the externals array, exclude the vendor libraries mentioned above from compilation:
// app.js
var React = require('react');
var _ = require('lodash');
var Component = React.createClass()
// ...
Then in index.html, I include both files:
// index.html
<script src='vendor.js'></script>
<script src='app.js'></script>
How can I enable app.js to access modules loaded via npm when using Browserify or Webpack? I know about creating a bundle with externals and then referencing the direct file (e.g., in node_modules) using an alias, but I'm looking for a more automatic solution that doesn't resemble Require.js.
In essence, I want to know if there's a way to bridge the two so that app.js can access the dependencies within vendor.js. It seems like a simple task, but I haven't been able to find an answer online. Any insight would be greatly appreciated!
Thanks!