JSPM

Features

• Support multi-format JavaScript module configuration import like master.css.{js,mjs,cjs,ts}
• Ability to import ESM or Typescript modules in a CommonJS environment
• Support for deep configuration extensions
• Independent compilation options and user configuration

Getting Started

npm i techor

Setup

Add packages/** to .workspaces of the root ./package.json

{
    "workspaces": [
        "packages/**"
    ]
}

Install CLI and core packages by techor:

npm i techor -D

• Requires npm@>=7 when using npm
• Set auto-install-peers when using pnpm
• You can also manually install peerDependencies for fixed versions

To create your first package, you may automate the required steps to define a new workspace using npm init.

npm init -w ./packages/a

When the package is ready, including the dependencies setup, run npm i in the project root directory to install all dependencies, including the workspaces.

Build system for monorepo

Most workspace packages will pre-set script commands, such as build, test, and lint. Since features depend on each other, builds will be executed sequentially.

You can now use Turborepo to easily build complex systems and run commands in one-linear.

Set up the /turbo.json:

{
    "$schema": "https://turbo.build/schema.json",
    "pipeline": {
        "dev": {
            "cache": false,
            "dependsOn": ["^build"],
            "outputs": ["dist/**"]
        },
        "build": {
            "dependsOn": ["^build"],
            "outputs": ["dist/**"]
        },
        "test": {
            "outputs": [],
            "inputs": [
                "src/**/*.tsx",
                "src/**/*.ts",
                "tests/**/*.ts"
            ]
        },
        "lint": {
            "outputs": []
        },
        "type-check": {
            "outputs": ["dist/**"]
        }
    }
}

Set up the scripts of /package.json:

{
    "scripts": {
        "dev": "turbo run dev",
        "build": "turbo run build",
        "test": "turbo run test --parallel",
        "lint": "turbo run lint --parallel",
        "type-check": "turbo run type-check --parallel"
    }
}

In most cases, dev and build cannot add the --parallel flag, which breaks their dependencies.

Typical workspace scripts for authoring a package:

{
    "scripts": {
        "build": "ts-node ../techor/src/bin pack",
        "dev": "npm run build -- --watch",
        "test": "jest",
        "type-check": "tsc --noEmit",
        "lint": "eslint src"
    }
}

From now on, you only need to run the command in the project root after opening the project.

npm run dev

Build your application or package:

npm run build

Test your business logic or UI by running scripts:

npm run test

Find and fix problems in JavaScript code before building:

npm run lint

Improve reliability with TypeScript's type checking:

npm run type-check

Continuous Integration

With the well-configured build system, almost all commands can be automated through CI, taking GitHub Actions as an example:

Build automated tests on the beta, the main, and the pull request stream:

name: Test
on:
    push:
        branches:
            - main
            - beta
    pull_request_target:
        types:
            - opened
            - synchronize

jobs:
    version:
        timeout-minutes: 15
        runs-on: ubuntu-20.04
        strategy:
            matrix:
                node-version: [18.12.1]
        steps:
            - uses: actions/checkout@v3
            - uses: actions/setup-node@v3
              with:
                  node-version: ${{ matrix.node-version }}
                  cache: 'npm'
            - run: npm ci
            - run: npm run build
            - run: npm run test

The same goes for lint and type-check.

While the build command will work with deploy and release, techor builds a complete package release workflow and the tools needed during it.

Next, check out the Aron's semantic release