packup v0.0.14

Zero-config web application packager in Deno.

⚠️ This tool is still in its early development stage.

Features

Install via deno.land/x:

deno run -A https://deno.land/x/packup@v0.0.14/install.ts

Write HTML and JavaScript:

index.html

<html>
<body>
  <script src="./main.ts"></script>
  <h1>Hi from packup!</h1>
</body>
</html>

main.ts

console.log("hello world");

packup has the development server builtin. Run the following command to start the server.

packup index.html

Then open http://localhost:1234/ in your browser.

See packup serve -h and packup build -h for more usages.

You can type check the script with Deno.

You need the following tsconfig.json for your frontend scripts correctly type checked.

{
  "compilerOptions": {
    "lib": ["esnext", "dom"]
  }
}

If you use vscode you need to set ‘deno.config’ property in .vscode/settings.json file to point the tsconfig.json:

{
  "deno.enable": true,
  "deno.lint": true,
  "deno.unstable": true,
  "deno.config": "./tsconfig.json"
}

If you’d prefer to use CLI directly to type check your script, you can use the following command for it:

deno cache --config tsconfig.json <script>

give the example of typings of the react + react-router + styled-components example
styled-components example
react router example
react example
–open support
Assets in static/ dir are served/copied as is. (Use this for images and other assets.)
- Something like https://github.com/elwin013/parcel-plugin-static-files-copy
livereload
optimize esbuild loading
–port support (serve)
–dist-dir support (build)
Runs parcels original examples (with Deno specific stuff modification).
- Doesn’t work because it includes commonjs references which I don’t want to support.
List asset sizes
Bundle javascript using esbuild
Bundle javascript using swc
deno run cli.ts [serve] index.html starts server at localhost port 1234, watch all dependencies, rebuild all assets when changed.
deno run cli.ts build index.html builds static assets to ‘dist’ directory.
Referenced scripts from <script> tags are bundled and served/built.
Stylesheets referenced from <link /> tags are just served/copied as is.