@pikantino/compiler

Pikantino - Typescript & Angular compiler

Usage no npm install needed!

<script type="module">
  import pikantinoCompiler from 'https://cdn.skypack.dev/@pikantino/compiler';
</script>

README

@pikantino/compiler

It's a tool to compile Typescript/Angular project into "ready-for-use" ES6 Modules. Uses @pikantino/pkg to compile dependencies. 1 second or less incremental builds irrespective of project complexity.

Installing

@pikantino/pkg is a peer dependency and should be installed manually.

  npm i @pikantino/pkg @pikantino/compiler --save-dev

Usage

  1. (Optional) Create an additional index.html file to retain the possibility of ng builds.

  2. Add all of the polyfills to index.html as CDN links:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.6.5/core.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.29/zone.min.js"></script>
  1. Add entry point with type="module" and ".js" extension at the end of the body of index.html with a path relative to the root of the app:
  <script src="src/main.js" type="module"></script>
  1. Run pikantino-compiler (and pass the name of new index.html if it was created or run without any arguments)
  pikantino-compiler -i index.html
  1. Serve ./dist folder in any way (http-server might help).

You might also want to run tsc -w --noEmit to get types checked.

CLI

$ pikantino-compiler --help
Options:
  --version      Show version number                                   [boolean]
  --outDir, -o   Output directory                              [default: "dist"]
  --srcDir, -s   Sources directory                              [default: "src"]
  --modules, -m  Modules output directory               [default: "web_modules"]
  --tsconfig     TsConfig file path                   [default: "tsconfig.json"]
  --index        Index.html file path relative to your src folder
                                                         [default: "index.html"]
  --watch, -w    Watch changes and rebuild
  --help         Show help                                             [boolean]

Roadmap

  • Add lazy loading (SystemJS) setup guide
  • Add ability to pack dependencies that don't have ES6 build
  • Integrate serving tool and live reload
  • Integrate live type checking