13

GitHub - Somepub/minimal-web_template

 3 years ago
source link: https://github.com/Somepub/minimal-web_template
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

minimal-web_boilerplate

const { heart } = BOILERPLATE(ESBUILD + ESTRALLA + CADDY + SCSS + PREACT)

How to run?

What is this?

This is a web_development environment template. (BOILERPLATE) Usually, people use Webpack, Rollup, or Parcel to develop with WEB. I'm not a big fan of those, and there is always an alternative.

Dependencies installed

Dependencies used for

  • estrella: Used as a bundler, that can watch source files and make changes to outDir.
  • @es-pack/esbuild-sass-plugin: A esbuild plugin, that compiles sccs files to css
  • livereload: Livereload code
  • Preact: React alternative (Much smaller)
  • Caddy: DevServer

DevServer

This template uses Caddy as a DevServer

To write devServer config and proxies:: edit - Caddyfile

  • Bundler is x10 faster than Webpack, Rollup, or Parcel (Any bundler made with JS)
  • Bundler uses minimal dependencies
  • Easier to write bundle conf
  • Caddy is more extensible and performant than webpack DevServer or rollup plugin serve
  • Preact has a smaller lib size than React
  • Bundler is fairly new, which means there could be issues that you can't find the right answer in GitHub or StackOverflow
  • Bundler doesn't have a wide range of plugins (Like systemJS, which may be coming soon?)
  • Minimal docs @ esbuild && estrella
  • Caddy setup and install is not "out of the box"
  • Preact doesn't support everything

What does "build.js" do?

Build.js does the following:

  • Bundle index.tsx file with esbuild
  • Watch files with estrella
  • Clear and make dist directory
  • Execute extra logic for css and scss watch
  • Generate HTML

Known Issues


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK