Use rollup plugins in es-dev-server
MIT License
Use rollup plugins in es-dev-server.
Warning: this project is still experimental.
npm i --save-dev es-dev-server-rollup
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 = require('@rollup/plugin-replace');
const { wrapRollupPlugin } = require('es-dev-server-rollup');
module.exports = {
plugins: [
wrapRollupPlugin(
replace({ include: ['src/**/*.js'], __environment__: '"development"' })
),
],
};
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.
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 = require('@rollup/plugin-json');
const { wrapRollupPlugin } = require('es-dev-server-rollup');
module.exports = {
plugins: [
{
resolveMimeType(context) {
if (context.path.endsWith('.json')) {
return 'js';
}
},
},
wrapRollupPlugin(json()),
],
};
Since es-dev-server doesn't do any bundling, only the following lifecycle hooks from rollup are called:
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:
The following rollup plugins don't work correctly at the moment:
@rollup/plugin-sucrase
with transform TS option)