template-web-library-rollup

A template to create front-end libraries with Rollup.js as the module-bundler [in-progress]

Technologies

Web

• jQuery (sample dependency)
• ES2015
• Less CSS

Module bundler: Rollup.js

Plugins

• rollup-plugin-babel for ES2015 transpilation
• rollup-plugin-commonjs to convert CommonJS modules to ES2015 before Rollup can process them
• rollup-plugin-node-resolve to teach Rollup how to find external modules
• rollup-plugin-peer-deps-external to instruct Rollup to exclude external dependencies from the final build
• rollup-plugin-postcss to handle transpilation and extraction of styles into a separate stylesheet file
• rollup-plugin-uglify for minification of JavaScript in production builds

Supporting dependencies

• @babel/core and @babel/preset-env to support rollup-plugin-babel
• less to supplement rollup-plugin-postcss and transpile LESS stylesheets into CSS
• effortless-css to provide Less CSS mixins
• eslint, babel-eslint, eslint-config-myterminal, eslint-config-airbnb, eslint-plugin-import, eslint-plugin-jsx-a11y and eslint-plugin-react to support ESlint in linting JavaScript files

Commands

• npm run debug to run Rollup.js in development mode.
  In this mode, Rollup.js generates source-maps for bundled JavaScript resources to simplify debugging of JavaScript in the web-browser.
• npm run develop to run Rollup.js in development mode and keep watching for file changes within the source.
  In this mode, Rollup.js generates source-maps for bundled JavaScript resources to simplify debugging of JavaScript in the web-browser.
• npm run build to run Rollup.js in production mode
  In this mode, Rollup.js minifies the JavaScript bundles and there is no source-map created.
• npm run lint to run ESLint on all JavaScript source files.

To-Do

• Find a way to separate other content like fonts, etc.
• Find a way to generate source-maps
• Find a way to build UMD modules
• Find a way to write and run tests