**presetter-preset-rollup** is an opinionated preset for you to setup rollup in a fraction of time you usually take via [**presetter**](https://github.com/alvis/presetter).
- 🗞️ Rollup 2
- 2️⃣ Dual CJS and ESM modules export by default
- 🍄 Common rollup packages included as one single bundle
-`@rollup/plugin-commonjs`
-`@rollup/plugin-graphql`
-`@rollup/plugin-image`
-`@rollup/plugin-json`
-`@rollup/plugin-yaml`
-`rollup`<~ of course including rollup itself
-`rollup-plugin-postcss`
-`rollup-plugin-ts`
-`rollup-plugin-tsconfig-paths`
-`rollup-plugin-visualizer`
## Quick Start
[**FULL DOCUMENTATION IS AVAILABLE HERE**](https://github.com/alvis/presetter/blob/master/README.md)
npx presetter use presetter-preset presetter-preset-rollup
```
That's. One command and you're set.
After bootstrapping, you would see a lot of configuration files generated, including a `rollup.config.ts` that has all plugins configured properly for you.
2. Develop and run life cycle scripts provided by the preset
At this point, all development packages specified in the preset are installed,
and now you can try to run some example life cycle scripts (e.g. run prepare).
After installation, your project file structure should resemble the following or with more configuration files if you also installed other presets such as [`presetter-preset-essentials`](https://github.com/alvis/presetter/blob/master/packages/preset-essentials).
Implement your business logic under `source` and prepare tests under `spec`.
**TIPS** You can always change the source directory to other (e.g. src) by setting the `source` variable in `.presetterrc.json`. See the [customisation](https://github.com/alvis/presetter/blob/master/packages/preset-rollup#customisation) section below for more details.
```
(root)
├─ .git
├─ .preseterrc.json
├─ node_modules
├─ source
│ ├─ <folders>
│ ├─ index.ts
│ ├─ (auxiliary).ts
├─ spec
│ ├─ *.spec.ts
├─ package.json
└─ rollup.config.ts
```
## Customisation
By default, this preset exports a handy configuration for rollup for a typescript project.
But you can further customise (either extending or replacing) the configuration by specifying the change in the config file (`.presetterrc` or `.presetterrc.json`).
These settings are available in the `config` field in the config file. For directories, the setting is specified in the `variable` field.
The structure of `.presetterrc` should follow the interface below:
// ┌─ any configuration supported by rollup, see https://rollupjs.org/guide/en/#configuration-files
// ...
/** list of plugin and its options */
plugins?:
| NormalisedRollupConfig['plugins']
| Array<
| string
| [name: string]
| [
name: string,
options:
| Record<string,unknown>
| `@apply ${string}`
| `@import ${string}`
| null,
]
>;
};
};
/** variables to be substituted in templates */
variable?: {
/** the directory containing all source code (default: source) */
source?: string;
/** the directory containing all output tile (default: source) */
output?: string;
};
}
```
For generating `rollup.config.ts`, this preset also support the `@apply` and `@import` directives such that you can also import configuration from other packages or ts/js files.
The usage of the directives is simple. In any part of the configuration for rollup, you can simply put
`@apply package_name` or `@import package_name` and the preset will automatically replace the content with an imported variable. For example:
