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://speciale-lyon-rb-x-vue-js.netlify.com/

Merci ! 🙏