https://github.com/movableink/rollup-split-index
Given an es6 input file, output its dependencies in a separate bundle
https://github.com/movableink/rollup-split-index
Last synced: 6 months ago
JSON representation
Given an es6 input file, output its dependencies in a separate bundle
- Host: GitHub
- URL: https://github.com/movableink/rollup-split-index
- Owner: movableink
- Created: 2017-11-10T22:30:49.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-02-12T02:47:57.000Z (over 3 years ago)
- Last Synced: 2024-11-17T04:14:14.930Z (7 months ago)
- Language: JavaScript
- Size: 137 KB
- Stars: 2
- Watchers: 5
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```sh
$ yarn add rollup-split-index
# or:
$ npm install --save rollup-split-index
```
## Usage
Your rollup.config.js file can look like this:
```javascript
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:
```sh
$ 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:
```javascript
import jQuery from 'jquery';
...
export default MyApp
```
becomes:
```javascript
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:
```html
console.log(window.MyApp);
```
## License
MIT