rollup-split-index v1.1.0
rollup-split-index
Splits dependency tree into the entrypoint file and all the rest.
The purpose of this module is to use rollup to bundle all dependencies into a single file while leaving the index.js
file human-readable (and human-editable). It does this with two plugins; dependenciesOnly
can be used while generating dist/vendor.js
and importExportToGlobal
can be used while generating dist/index.js
.
Install
$ yarn add rollup-split-index
# or:
$ npm install --save rollup-split-index
Usage
Your rollup.config.js file can look like this:
const config = require("./package.json");
const rollup = require("rollup");
const resolve = require("rollup-plugin-node-resolve");
const commonjs = require("rollup-plugin-commonjs");
const {
importExportToGlobal,
dependenciesOnly
} = require("rollup-split-index");
const inputFile = config.main; // likely index.js
module.exports = [
{
input: inputFile,
plugins: [resolve(), commonjs(), dependenciesOnly()],
output: {
name: importExportToGlobal.referenceName,
file: "dist/vendor.js",
format: "iife"
}
},
{
input: inputFile,
plugins: [resolve(), commonjs(), importExportToGlobal()],
output: {
file: "dist/index.js",
format: "es"
}
}
];
You can then run rollup as usual with:
$ node_modules/.bin/rollup -c rollup.config.js
This will load index.js
, trace its dependency tree including node_modules
, and bundle all dependencies into dist/vendor.js
. The vendor.js
file will export a __rollup_vendor
object referencing all of the imports.
In addition, this will transform index.js
by rewriting es6 imports and exports to global declarations. For example:
import jQuery from 'jquery';
...
export default MyApp
becomes:
const jQuery = __rollup_vendor['jquery']
...
window.MyApp = MyApp;
You should then be able to load both files in script tags and then reference the default exported variable:
<script src="./dist/vendor.js"></script>
<script src="./dist/index.js"></script>
<script>
console.log(window.MyApp);
</script>
License
MIT