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";
``