@shopify/loom-plugin-rollup v1.0.2
@shopify/loom-plugin-rollup
Exposes hooks and build step to run rollup
.
Installation
$ yarn add @shopify/loom-plugin-rollup --dev
Usage
The low-level functionality of this package is split into two parts.
rollupHooks
is a plugin that exposes hooks to configurerollup
.rollupBuild
is a plugin that registers a build step that runsrollup
with the configuration gathered by the hooks defined inrollupHooks
.
Add both plugins to your project, along with configuration of the hooks. This example configures the rollupInputOptions
and rollupOutputs
hooks.
import {createPackage, Runtime, createProjectBuildPlugin} from '@shopify/loom';
import {rollupHooks, rollupBuild} from '@shopify/loom-plugin-rollup';
export default createPackage((pkg) => {
pkg.use(rollupHooks(), rollupBuild(), rollupConfig());
});
function rollupConfig() {
return createProjectBuildPlugin('Test', ({hooks, project}) => {
hooks.target.hook(({hooks}) => {
hooks.configure.hook((configuration) => {
configuration.rollupInputOptions?.hook(() => {
return {input: project.fs.resolvePath('./src/index.js')};
});
configuration.rollupOutputs?.hook(() => {
return [{format: 'esm', dir: project.fs.buildPath('esm')}];
});
});
});
});
}
Hooks
The rollupInput
, rollupPlugins
and rollupExternal
hooks map to input
, plugins
and externals
keys of Rollup's InputOptions
object as documented at https://rollupjs.org/guide/en/#inputoptions-object.
The rollupInputOptions
hook defines a whole InputOptions
object, it includes any values set in rollupInput
, rollupPlugins
and rollupExternal
, this can be used if you need to control any advanced input configuration options.
The rollupOutputs
hook is an array of Rollup's OutputOptions
objects as documented at https://rollupjs.org/guide/en/#outputoptions-object.
rollupPlugins
Helper
This package exports a rollupPlugins
loom plugin that provides a shorthand to add items to the rollupPlugins
hook. Give this plugin either an array of rollup plugins, or a function that takes a loom Target
and returns an array of rollup plugins. This allows you to control what plugins are added based upon the Target
.
import {createPackage, Runtime, createProjectBuildPlugin} from '@shopify/loom';
import {
rollupHooks,
rollupBuild,
rollupPlugins,
} from '@shopify/loom-plugin-rollup';
export default createPackage((pkg) => {
pkg.use(
rollupHooks(),
rollupBuild(),
rollupConfig(),
// Adds the injecterPlugin to all targets with the same config
rollupPlugins([injecterPlugin('all')]),
// Only adds the injecterPlugin when compiling the target with the specialBuild option set
rollupPlugins((target) => {
return target.options.specialBuild
? [injecterPlugin('only specialBuild')]
: [];
}),
);
// A sample Rollup plugin that shall append some content to each file
function injecterPlugin(string) {
return {
name: `test-injecter`,
transform(code) {
return code + '/*Injected content ~' + string + '~ */';
},
};
}
});
function rollupConfig() {
return createProjectBuildPlugin('Test', ({hooks, project}) => {
hooks.target.hook(({hooks}) => {
hooks.configure.hook((configuration) => {
configuration.rollupInputOptions?.hook(() => {
return {input: project.fs.resolvePath('./src/index.js')};
});
configuration.rollupOutputs?.hook(() => {
return [{format: 'esm', dir: project.fs.buildPath('esm')}];
});
});
});
});
}
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago