es-dev-server-rollup
Version:
Use rollup plugins in es-dev-server
85 lines (61 loc) • 3.06 kB
Markdown
# es-dev-server-rollup
Use rollup plugins in es-dev-server.
> Warning: this project is still experimental.
## Installation
```bash
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:
```js
const replace = require('/plugin-replace');
const { wrapRollupPlugin } = require('es-dev-server-rollup');
module.exports = {
plugins: [
wrapRollupPlugin(
replace({ include: ['src/**/*.js'], __environment__: '"development"' })
),
],
};
```
## 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:
```js
const json = require('/plugin-json');
const { wrapRollupPlugin } = require('es-dev-server-rollup');
module.exports = {
plugins: [
{
resolveMimeType(context) {
if (context.path.endsWith('.json')) {
return 'js';
}
},
},
wrapRollupPlugin(json()),
],
};
```
## 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:
- [/plugin-alias](https://github.com/rollup/plugins/tree/master/packages/alias)
- [/plugin-inject](https://github.com/rollup/plugins/tree/master/packages/inject)
- [/plugin-commonjs](https://github.com/rollup/plugins/tree/master/packages/commonjs)
- [/plugin-dsv](https://github.com/rollup/plugins/tree/master/packages/dsv)
- [/plugin-image](https://github.com/rollup/plugins/tree/master/packages/image)
- [/plugin-json](https://github.com/rollup/plugins/tree/master/packages/json)
- [/plugin-node-resolve](https://github.com/rollup/plugins/tree/master/packages/node-resolve)
- [/plugin-replace](https://github.com/rollup/plugins/tree/master/packages/replace)
- [/plugin-sucrase](https://github.com/rollup/plugins/tree/master/packages/sucrase)
The following rollup plugins don't work correctly at the moment:
- [/plugin-typescript](https://github.com/rollup/plugins/tree/master/packages/typescript) (use `@rollup/plugin-sucrase` with transform TS option)