From d21dfba3a633a9f173d0b125ed83a97cdbe299fc Mon Sep 17 00:00:00 2001 From: Ryan Chatterton Date: Thu, 2 Nov 2017 10:58:09 -0400 Subject: [PATCH 1/2] 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"] +} +``` From dc0e8d41dc097e2bbe0717f220bee2ebf0a378dc Mon Sep 17 00:00:00 2001 From: "Rico Sta. Cruz" Date: Sat, 17 Mar 2018 08:43:59 +0800 Subject: [PATCH 2/2] rollup: cleanup --- rollup.md | 33 ++++++++++++++++++++------------- 1 file changed, 20 insertions(+), 13 deletions(-) diff --git a/rollup.md b/rollup.md index 6a7b0c03e..afe1d3dfd 100644 --- a/rollup.md +++ b/rollup.md @@ -3,6 +3,8 @@ title: Rollup.js category: JavaScript libraries layout: 2017/sheet updated: 2017-11-01 +authors: + - github: ryanSN keywords: - rollup.watch - bundle @@ -25,17 +27,20 @@ export default { } ``` #### 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 +| Command | Description | +| --- | --- | +| `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 +You may need to use `./node_modules/.bin/rollup` as a command if you did not install rollup globally. -### Mutiple files +### Mutiple outputs #### rollup.config.js @@ -67,6 +72,7 @@ This creates `main.js` and `vendor.js`. ### Plugins #### Terminal + ```bash npm install -D rollup-plugin-json ``` @@ -74,7 +80,7 @@ npm install -D rollup-plugin-json #### rollup.config.js ```js -import json from 'rollup-plugin-json'; +import json from 'rollup-plugin-json' export default { input: 'src/main.js', @@ -87,7 +93,6 @@ export default { ``` - ### npm packages #### Terminal @@ -97,7 +102,7 @@ npm install --save-dev rollup-plugin-node-resolve #### rollup.config.js ```js -import resolve from 'rollup-plugin-node-resolve'; +import resolve from 'rollup-plugin-node-resolve' export default { input: 'src/main.js', @@ -109,19 +114,20 @@ export default { } ``` -This time when you run a npm run build, no warning is emitted and contains the imported modules - +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'; +import resolve from 'rollup-plugin-node-resolve' export default { input: 'src/main.js', @@ -151,8 +157,8 @@ npm install -D rollup-plugin-babel #### rollup.config.js ```js -import resolve from 'rollup-plugin-node-resolve'; -import babel from 'rollup-plugin-babel'; +import resolve from 'rollup-plugin-node-resolve' +import babel from 'rollup-plugin-babel' export default { input: 'src/main.js', @@ -168,6 +174,7 @@ export default { ] } ``` + #### src/.babelrc ```js