https://github.com/muchisx/rollup-theme-extensions
A generator for Rollup configs to build Shopify theme app extensions with typescript and (in the future) css preprocessors.
https://github.com/muchisx/rollup-theme-extensions
rollup-config shopify-app shopify-theme
Last synced: about 1 year ago
JSON representation
A generator for Rollup configs to build Shopify theme app extensions with typescript and (in the future) css preprocessors.
- Host: GitHub
- URL: https://github.com/muchisx/rollup-theme-extensions
- Owner: muchisx
- Created: 2024-06-03T02:51:44.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-25T21:41:54.000Z (about 2 years ago)
- Last Synced: 2024-10-31T11:51:43.864Z (over 1 year ago)
- Topics: rollup-config, shopify-app, shopify-theme
- Language: TypeScript
- Homepage:
- Size: 71.3 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Rollup Theme Extensions (Shopify Apps)
This is a generator for Rollup configs to build Shopify theme app extensions with typescript and (in the future) css preprocessors.
## Features:
- Typescript compilation
- Typescript minification (optional)
- Rollup bundling
- Sourcemaps (currently turned off because Shopify doesn't allow sourcemaps file extension inside the /assets folder)
- CSS minification (optional)
- Custom source folder
- Custom output folder
## Installation
```bash
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.
## License
MIT License
## Contributing
Feel free to open an issue or a pull request if you have any suggestions or improvements.
## Author
[muchisx](https://github.com/muchisx)