Rollup logo

Build Your Javascript Libraries With Rollup

Disclaimer!

Quick introduction

Start with Why?

why build a library?

  • Reuse code between projects
  • Reducing overall complexity of your apps
  • Force you to tests your code
  • Force you to write customizable code
  • Open source your code

why don't build a library?

  • Maintain a whole new project
  • Hiding complexity outside of your project
  • Make upgrade more complicated
  • Maintain another tool

why rollup?

  • Easy to use
  • Clean output code
  • Supports Tree-Shaking and Code Splitting

Rollup 101

        # rollup.config.js

export default [
// browser-friendly UMD build
{
input: 'src/main.js',
output: {
  name: 'my-package',
  file: pkg.browser,
  format: 'umd'
},
plugins: [
  resolve(),
  commonjs()
]
},

// CommonJS (for Node) and ES module (for bundlers) build.
{
input: 'src/main.js',
output: [
  { file: pkg.main, format: 'cjs' },
  { file: pkg.module, format: 'es' }
]
}
]

Rollup 101

        # package.json

{
"main": "dist/json-api-response-converter.js",
"module": "dist/json-api-response-converter.es.js",
"browser": "dist/json-api-response-converter.min.js",
"scripts": {
"build": "rollup -c"
}
}

Rollup with plugins

Prepare your package

        "scripts": {
"prepublishOnly": "yarn build"
}
      
        # .npmignore

jest.config.js
__tests__
.eslintrc.js
babel.config.js
.github
rollup.config.js

Publish your package

        $ yarn login
$ yarn publish
      
        $ yarn add my-awesome-package

Publish your package

  • Write explicite README with examples and how to use it
  • Complete fields in package.json
  • Respect SemVer, please

Caveats

  • Code duplication
  • Huge bundles

me

@guillaumebriday - guillaumebriday.fr

👉 https://build-your-javascript-libraries-with-rollup.guillaumebriday.fr/

Merci ! 🙏