es-dev-server-rollup
Use rollup plugins in es-dev-server.
Warning: this project is still experimental.
Installation
npm i --save-dev es-dev-server-rollup
Usage
es-dev-server plugins and rollup plugins share a very similar API, making it possible to reuse many rollup plugins inside es-dev-server with an adapter.
Import the rollup plugin and the wrapRollupPlugin
function in your es-dev-server config. Then, wrap the rollup plugin with the wrapper function:
const replace = ;const wrapRollupPlugin = ; moduleexports = plugins: ;
Performance
Some rollup plugins do expensive operations. During development, this matters a lot more than during a production build. It's recommended to always scope the usage of plugins using the include
and exclude
options.
non-standard file types
The rollup build process assumes that any imported files are are meant to be compiled to JS, es-dev-server serves many different kinds of files to the browser. If you are transforming a non-standard filetype to JS, for example .json files, you need to instruct es-dev-server to handle it as a JS file:
const json = ;const wrapRollupPlugin = ; moduleexports = plugins: { if contextpath return 'js'; } ;
Compatibility with rollup plugins
Since es-dev-server doesn't do any bundling, only the following lifecycle hooks from rollup are called:
- options
- buildStart
- resolveId
- load
- transform
Plugins that use other lifecycle hooks are mostly build optimizations and are not interesting during development.
The following rollup plugins have been tested to work correctly:
- @rollup/plugin-alias
- @rollup/plugin-inject
- @rollup/plugin-commonjs
- @rollup/plugin-dsv
- @rollup/plugin-image
- @rollup/plugin-json
- @rollup/plugin-node-resolve
- @rollup/plugin-replace
- @rollup/plugin-sucrase
The following rollup plugins don't work correctly at the moment:
- @rollup/plugin-typescript (use
@rollup/plugin-sucrase
with transform TS option)