astro-parcel
Build and optimize your Astro project using Parcel
Install
npm i --save-dev astro-parcel
CLI
astro-parcel <command> [options]
Build and optimize your astro project using Parcel
Commands
build
dev
serve
Options
--astroDist <string = "./dist"> the directory that astro writes the build result to
--parcelDist <string = "./dist"> the directory to output the parcel result
--publicDir <string = "./public"> the public folder path. The files that are directly copied to parcelDist folder
--srcDir <string = "./src"> 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 <string = resolved> the astro cli js path
--parcelJs <string = resolved> the parcel cli js path
--nodeBin <string = current node> the node bin pathTo use astro-parcel, you should configure your Astro project like normal. Then, call the astro-parcel commands.
To build the project:
astro-parcel buildYou 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:
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.
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 <link> tag is used by for the production build.
---
if (process.env.NODE_ENV !== "production") {
await import("./style.scss")
}
---
<head>
<link rel="stylesheet" href="./styles.scss" class="href">
</head>
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.
@use "../components/navbar/navbar.scss";
@use "../components/footer/footer.scss";