New cheatsheep: Rollup.js

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"]
+}
+```