rollup.md

   1 ---
   2 title: Rollup.js
   3 category: JavaScript libraries
   4 layout: 2017/sheet
   5 updated: 2020-01-29
   6 authors:
   7   - github: ryanSN
   8 keywords:
   9   - rollup.watch
  10   - bundle
  11   - rollup.config.js
  12 intro: |
  13   [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.
  14 ---
  15
  16 ### Basic config
  17
  18 #### rollup.config.js
  19
  20 ```js
  21 export default {
  22   input: 'src/main.js',
  23   output: {
  24     file: 'bundle.js',
  25     format: 'cjs'
  26   }
  27 }
  28 ```
  29 #### Terminal
  30
  31 ```bash
  32 npm install -D rollup
  33 ```
  34
  35 | Command                                | Description         |
  36 | ---                                    | ---                 |
  37 | `rollup -c -o bundle.js`               | bundle using config |
  38 | `rollup main.js --o bundle.js --f cjs` | bundle              |
  39 | `rollup --watch`                       | bundle continuously |
  40
  41 You may need to use `./node_modules/.bin/rollup` as a command if you did not install rollup globally.
  42
  43 ### Multiple outputs
  44
  45 #### rollup.config.js
  46
  47 ```js
  48 export default [
  49   {
  50     input: 'src/main.js',
  51     output: {
  52       file: __dirname + '/public/main.js',
  53       format: 'cjs',
  54       name: 'main'
  55     }
  56   },
  57   {
  58     input: 'src/vendor.js',
  59     output: {
  60       file: __dirname + 'public/vendor.js',
  61       format: 'cjs',
  62       name: 'vendor'
  63     }
  64   }
  65 ]
  66 ```
  67
  68 This creates `main.js` and `vendor.js`.
  69
  70 ## Using plugins
  71
  72 ### Plugins
  73
  74 #### Terminal
  75
  76 ```bash
  77 npm install -D @rollup/plugin-json
  78 ```
  79
  80 #### rollup.config.js
  81
  82 ```js
  83 import json from '@rollup/plugin-json'
  84
  85 export default {
  86   input: 'src/main.js',
  87   output: {
  88     file: 'bundle.js',
  89     format: 'cjs'
  90   },
  91   plugins: [ json() ]
  92 }
  93
  94 ```
  95
  96 ### npm packages
  97
  98 #### Terminal
  99 ```bash
 100 npm install -D @rollup/plugin-node-resolve
 101 ```
 102
 103 #### rollup.config.js
 104 ```js
 105 import resolve from '@rollup/plugin-node-resolve'
 106
 107 export default {
 108   input: 'src/main.js',
 109   output: {
 110     file: 'bundle.js',
 111     format: 'cjs'
 112   },
 113   plugins: [ resolve() ]
 114 }
 115 ```
 116
 117 When you run a npm run build, no warning is emitted and contains the imported modules.
 118
 119 ### Peer dependencies
 120
 121 #### Terminal
 122
 123 ```bash
 124 npm install -D @rollup/plugin-node-resolve
 125 ```
 126
 127 #### rollup.config.js
 128
 129 ```js
 130 import resolve from '@rollup/plugin-node-resolve'
 131
 132 export default {
 133   input: 'src/main.js',
 134   output: {
 135     file: 'bundle.js',
 136     format: 'cjs'
 137   },
 138   plugins: [resolve({
 139     // pass custom options to the resolve plugin
 140     customResolveOptions: {
 141       moduleDirectory: 'node_modules'
 142     }
 143   })],
 144   // indicate which modules should be treated as external
 145   external: ['lodash']
 146 }
 147 ```
 148
 149 ### Babel
 150
 151 #### Terminal
 152
 153 ```bash
 154 npm install -D rollup-plugin-babel
 155 ```
 156
 157 #### rollup.config.js
 158
 159 ```js
 160 import resolve from '@rollup/plugin-node-resolve'
 161 import babel from 'rollup-plugin-babel'
 162
 163 export default {
 164   input: 'src/main.js',
 165   output: {
 166     file: 'bundle.js',
 167     format: 'cjs'
 168   },
 169   plugins: [
 170     resolve(),
 171     babel({
 172       exclude: 'node_modules/**' // only transpile our source code
 173     })
 174   ]
 175 }
 176 ```
 177
 178 #### src/.babelrc
 179
 180 ```js
 181 {
 182   "presets": [
 183     ["latest", {
 184       "es2015": {
 185         "modules": false
 186       }
 187     }]
 188   ],
 189   "plugins": ["external-helpers"]
 190 }
 191 ```