A Rollup configuration for compiling and minifying CSS and TypeScript for Shopify Theme App extensions
npm install rollup-theme-extensionsbash
npm install --save-dev rollup-theme-extensions rollup
`
Usage
> _in rollup.config.mjs_
`js
// @ts-check
import { createRollupConfig } from "rollup-theme-extensions";
const extensionsSourceDir = "extensions.src";
const extensionsDir = "extensions";
export default createRollupConfig({
extensionsSourceDir,
extensionsDir,
minifyCss: true,
minifyJs: true,
});
`
> _in package.json_
`json
{
"scripts": {
"ext:theme-build": "npx rollup -c",
"ext:theme-watch": "npx rollup -c --watch"
}
}
`
You can call your scripts however you want, the ones above are just examples, and you can also make them more specific to your project (like launch a specific config file).
Options
- extensionsSourceDir (string): The source folder where your extension files are located (it will look for folders that start with theme- prefix, and inside them, it will look for a folder called assets, and use those files for compilation).
- extensionsDir (string): The output folder where the compiled files will be placed (they will always be placed inside an assets folder).
- minifyCss (boolean): Whether to minify the CSS files or not.
- minifyJs` (boolean): Whether to minify the JS files or not.