Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aminya/astro-parcel
Build and optimize your Astro project using Parcel
https://github.com/aminya/astro-parcel
asto-plugin astro bundle html optimize parcel posthtml
Last synced: 17 days ago
JSON representation
Build and optimize your Astro project using Parcel
- Host: GitHub
- URL: https://github.com/aminya/astro-parcel
- Owner: aminya
- License: apache-2.0
- Created: 2022-07-02T11:36:12.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-10-01T22:17:57.000Z (over 1 year ago)
- Last Synced: 2025-01-10T11:43:07.573Z (20 days ago)
- Topics: asto-plugin, astro, bundle, html, optimize, parcel, posthtml
- Language: TypeScript
- Homepage:
- Size: 1.03 MB
- Stars: 11
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# astro-parcel
Build and optimize your Astro project using Parcel
## Install
```
npm i --save-dev astro-parcel
```
## CLI
```ps1
astro-parcel [options]
Build and optimize your astro project using Parcel
Commands
build
dev
serve
Options
--astroDist the directory that astro writes the build result to
--parcelDist the directory to output the parcel result
--publicDir the public folder path. The files that are directly copied to parcelDist folder
--srcDir the src folder. This path is used to search for the files that are not present in astroDist folder
Extra arguments are directly passed to Astro and then Parcel
Advanced Options
--astroJs the astro cli js path
--parcelJs the parcel cli js path
--nodeBin the node bin path
```
To use astro-parcel, you should configure your Astro project like normal. Then, call the astro-parcel commands.
To build the project:
```ps1
astro-parcel build
```
You can also specify the build directory for Parcel via `--parcelDist`. If you have changed the `outDir` of Astro, you should pass it here as `--astroDist`:
```ps1
astro-parcel build --astroDist "./dist" --parcelDist "./parcel-dist"
```
To use another version of Astrojs or Parceljs pass their binary js paths via `--astroJs` and `--parcelJs`.
```ps1
astro-parcel build --astroDist "./dist" --parcelDist "./parcel-dist" --parcelJs "./node_modules/parcel/lib/bin.js" --astroJs "./node_modules/astro/dist/cli/index.js"
```
## Why
Astro is a great framework for making websites, and Parcel provides awesome bundling and optimization (e.g. Parcel-CSS, HTMLNano, etc.) functionality out of the box. This package makes it possible to use Astro with Parcel.
## Using Parcel as the CSS, LESS, SCSS Bundler
Astro's CSS bundling can result in duplicate files, while Parcel's CSS functionality is great in optimizing the CSS files. To use that, link the style files like the following. Use a unique file name, so astro-parcel can resolve it in the source directory. The `await import` is used for the `dev` build, and the `` tag is used by for the production build.
```astro
---
if (process.env.NODE_ENV !== "production") {
await import("./style.scss")
}
---
```
To use a single CSS bundle for the whole website, create a `./pages/styles.scss` and import all the CSS files used in your Page, and link it to your HTML files under the pages folder.
```scss
@use "../components/navbar/navbar.scss";
@use "../components/footer/footer.scss";
```