This boilerplate provides an environment with yarn3, esbuild, typescript, sass and React. Sass import modules are supported as well1.
This boilerplate uses Node Modules.
| Name | Version | Context | Usage |
|---|---|---|---|
| react | ^18.2.0 | Runtime | Main framework |
| react-bootstrap | ^2.7.4 | Runtime | Demo |
| react-dom | ^18.2.0 | Runtime | Main framework |
| @squirrelnetwork/esbuild-sass-modules-plugin | ^1.0.9 | Builder | Import SASS in js/ts sources |
| @types/react | ^18.2.9 | Coding | Type declarations |
| @types/react-dom | ^18.2.4 | Coding | Type declarations |
| @yarnpkg/fslib | ^3.0.0-rc.45 | Builder | ZipFS lookup |
| @yarnpkg/libzip | ^3.0.0-rc.45 | Builder | ZipFS lookup |
| dotenv-safe | ^8.2.0 | Builder | Build configuration |
| esbuild | ^0.17.19 | Builder | JS/TS Compiler/Bundler |
| gulp | ^4.0.2 | Builder | Task Runner2 |
| path | ^0.12.7 | Builder | Path resolution |
| pnpapi | ^0.0.0 | Builder | Yarn module resolution |
| postcss | ^8.4.24 | Builder | Demo |
| sass | ^1.63.43 | Builder | SASS/SCSS sources |
| typescript | ^5.1.3 | Coding | Type checking4 |
| url | ^0.11.1 | Builder | Path resolution |
| Path | Description |
|---|---|
| / | Configuration files and utils |
| dist/ | Built files and index.html |
| importers/ | Custom ESBuild plugins5 |
| src/ | The actual sources of your app |
| .env.example | The example of a .env (see paragraph Configuration) |
| builder.js | The code that runs the builder and defines the tasks |
| builder.utils.js | Utils used for plugins like the custom ZipFS SASS module lookup |
| Gulpfile.js | An example Gulpfile which defines build tasks for Gulp |
| LICENSE | This repository is licensed under the MIT license |
| package.json | Project dependencies |
| README.md | This file |
| simple-importer.js | The plugin used to load the custom JSON & js importers5 |
| tsconfig.json | Used by esbuild for building and by typescript for editors4 |
You can launch the building process either by calling the build() procedure inside builder.js or with the example Gulp task build.
Configuration is handled with environment variables (see dotenv-safe).
The project is built by esbuild, which in the pre-compilation phase delegates specific modules to plugins, such as the SASS one I use in this example, according to their filters.
The npm package typescript is not involved in this process4.
There are no post-build actions in this project (except for the serve task, which is provided by esbuild).
- Vue
- Angular
- ...
Footnotes
-
Via importers (check the wiki) ↩
-
You can use any Task Runner with this configuration. I just chose Gulp because it's simple enough to configure a demo. ↩
-
Warning: versions 1.63.0<1.63.4 have a bug (sass/dart-sass#1995) which causes SASS to be unable to be imported. ↩
-
TypeScript is not actually used in the build process because esbuild can build typescript by itself. You don't actually need it, but some editors will complain if it is not installed. ↩ ↩2 ↩3
-
Custom plugins are already handled by esbuild, but I provide a way to also load them as JSON for simple loaders, especially with such cases like SASS import urls whose modules do not resolve in the Yarn context (esbuild only handles this for direct dependencies). You might want to look at the wiki of this project for how to implement path resolvers. I provide an example loader bootstrap-icons.json. ↩ ↩2