Rollup-based dev environment for JavaScript (part 1)

Camille Hodoul
Mar 22 · 5 min read

Summary

Prerequisite

Directory structure

Babel

npm install --save-dev @babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/plugin-syntax-dynamic-import @babel/plugin-transform-runtime @babel/preset-env @babel/preset-flow @babel/preset-react

Rollup

npm install --save-dev rollup rollup-plugin-babel rollup-plugin-commonjs rollup-plugin-clear rollup-plugin-node-builtins rollup-plugin-node-globals rollup-plugin-node-resolve rollup-plugin-replace rollup-plugin-terser
rollup -c --prod --mini # will build for production
rollup -c # will build for development

NamedExports

Input

Output

Code splitting

Plugins

Loading our bundles from index.html

Flow

npm install --save-dev flow-bin
npm install -g flow-typed
flow-typed install # will create a flow-typed/ directory

Serve

npm install --save-dev serve

Scripts

npm run build # production build
npm run watch # dev loop
npm run serve # then browse to http://localhost:5000
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade