From d21dfba3a633a9f173d0b125ed83a97cdbe299fc Mon Sep 17 00:00:00 2001 From: Ryan Chatterton Date: Thu, 2 Nov 2017 10:58:09 -0400 Subject: [PATCH] New cheatsheep: Rollup.js --- rollup.md | 184 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 184 insertions(+) create mode 100644 rollup.md diff --git a/rollup.md b/rollup.md new file mode 100644 index 000000000..6a7b0c03e --- /dev/null +++ b/rollup.md @@ -0,0 +1,184 @@ +--- +title: Rollup.js +category: JavaScript libraries +layout: 2017/sheet +updated: 2017-11-01 +keywords: + - rollup.watch + - bundle + - rollup.config.js +intro: | + [Rollup](https://rollupjs.org/) Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. +--- + +### Basic config + +#### rollup.config.js + +```js +export default { + input: 'src/main.js', + output: { + file: 'bundle.js', + format: 'cjs' + } +} +``` +#### Terminal +```bash +npm install -D rollup +``` + +| `rollup -c -o bundle.js` | bundle using config +| `rollup main.js --o bundle.js --f cjs` | bundle +| `rollup --watch` | bundle continuously + +You may need to use `./node_modules/.bin/rollup` as a command if you did not install rollup globally + +### Mutiple files + +#### rollup.config.js + +```js +export default [ + { + input: 'src/main.js', + output: { + file: __dirname + '/public/main.js', + format: 'cjs', + name: 'main' + } + }, + { + input: 'src/vendor.js', + output: { + file: __dirname + 'public/vendor.js', + format: 'cjs', + name: 'vendor' + } + } +] +``` + +This creates `main.js` and `vendor.js`. + +## Using plugins + +### Plugins + +#### Terminal +```bash +npm install -D rollup-plugin-json +``` + +#### rollup.config.js + +```js +import json from 'rollup-plugin-json'; + +export default { + input: 'src/main.js', + output: { + file: 'bundle.js', + format: 'cjs' + }, + plugins [ json() ] +} + +``` + + +### npm packages + +#### Terminal +```bash +npm install --save-dev rollup-plugin-node-resolve +``` + +#### rollup.config.js +```js +import resolve from 'rollup-plugin-node-resolve'; + +export default { + input: 'src/main.js', + ouptut: { + file: 'bundle.js', + format: 'cjs' + }, + plugins: [ resolve() ] +} +``` + +This time when you run a npm run build, no warning is emitted and contains the imported modules + + +### Peer dependencies + +#### Terminal +```bash +npm install -D rollup-plugin-node-resolve +``` + +#### rollup.config.js +```js +import resolve from 'rollup-plugin-node-resolve'; + +export default { + input: 'src/main.js', + output: { + file: 'bundle.js', + format: 'cjs' + }, + plugins: [resolve({ + // pass custom options to the resolve plugin + customResolveOptions: { + moduleDirectory: 'node_modules' + } + })], + // indicate which modules should be treated as external + external: ['lodash'] +} +``` + +### Babel + +#### Terminal + +```bash +npm install -D rollup-plugin-babel +``` + +#### rollup.config.js + +```js +import resolve from 'rollup-plugin-node-resolve'; +import babel from 'rollup-plugin-babel'; + +export default { + input: 'src/main.js', + output: { + file: 'bundle.js', + format: 'cjs' + }, + plugins: [ + resolve(), + babel({ + exclude: 'node_modules/**' // only transpile our source code + }) + ] +} +``` +#### src/.babelrc + +```js +{ + "presets": [ + ["latest", { + "es2015": { + "modules": false + } + }] + ], + "plugins": ["external-helpers"] +} +```