Build and optimize your Astro project using Parcel
npm i --save-dev astro-parcel
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"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.
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";
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent