@growflow/babel-preset

GrowFlow Babel Preset

Babel preset that allows you to use the latest TypeScript features across GrowFlow projects.

Usage

yarn add --dev @growflow/babel-preset

You can then create a babel.config.json file in the root of your project:

{
  "presets": ["@growflow"]
}

Compiling Libraries

If you are building a library package to be used in other apps, you can make use of the preset's environment configuration.

Here is a sample package.json that will compile a TypeScript project with source files in the src folder into three "distribution" folders:

• es: This is where the "webpackable" version of the compiled code is output. This code will still have import and export module syntax untouched. The package.json's module key points to this entry which Webpack will find and use. We can also signal to Webpack that our library is tree-shakable via the sideEffects key.

• lib: This is where the node version of the compiled code is output. The module syntax will be compiled to CommonJS so that it can be used within a node app. This output corresponds to the package.json's main entry.

• dist: The TypeScript type declarations are output here so that consuming apps that use TypeScript will get intellisense and type-checking. The package.json's types key points here.

{
  "main": "lib/index.js",
  "module": "es/index.js",
  "types": "dist/index.d.ts",

  "sideEffects": false,

  "files": ["es", "lib", "dist", "README.md"],

  "scripts": {
    "build": "rimraf dist es lib && tsc -p tsconfig.output.json && babel src -d es --extensions \".ts,.tsx,.js,.jsx\" --source-maps --root-mode upward --copy-files && cross-env BABEL_ENV=node babel src -d lib --extensions \".ts,.tsx,.js,.jsx\" --source-maps --root-mode upward --copy-files"
  },

  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.6",
    "@growflow/babel-preset": "^5.7.1",
    "cross-env": "^7.0.2",
    "rimraf": "^3.0.2"
  }
}

where tsconfig.output.json is a TypeScript configuration file which is only used to output type definitions:

{
  "extends": "./tsconfig.json",
  "include": ["src"],
  "compilerOptions": {
    "noEmit": false,
    "emitDeclarationOnly": true,
    "rootDir": "src",
    "outDir": "dist"
  }
}

We make use of cross-env to set the BABEL_ENV variable to that poor Windows users can play along. Remember, Windows users are people too and they deserve to compile code just like you. 😁

Usage within a Monorepo

If you have multiple packages within a monorepo, you can make use of this preset with a single babel.config.json file at the root of the project. In order for babel to find the configuration file, you will need to set the root mode to upward. The sample build command above already does this.