babel-preset-frontful

babel-preset-frontful is packaged provider of Babel preset and package build and deployment utilities. It is default transpiler setup and package build instrument for Frontful infrastructure

Installation

# Using yarn 
yarn add babel-preset-frontful
# or npm 
npm install -s babel-preset-frontful

Integration

Package build and deployment

babel-preset-frontful is part of Package development assist and apart from Babel preset it provides basic build and deployment instrumentation for packages.

When installed babel-preset-frontful script is added to package projects node_modules/.bin that can be used in scripts section of package.json

// package.json
{
  "scripts": {
    "build": "babel-preset-frontful build",
    "deploy": "babel-preset-frontful deploy"
  }
}

Build

# Using yarn 
yarn build
# or npm 
npm run build

babel-preset-frontful build script has no opinions about your packages structure. It takes all files and folders excluding /node_modules, copies them to /build folder and transpiles each supported file e.g .js and .jsx using its preset.

Deploy

# Using npm 
npm run deploy

babel-preset-frontful deploy script builds package using babel-preset-frontful build and deploys /build folder content to Npm registry.
deploy script does not handle authentication to npm, you should be signed in and have permission to deploy. Use npm login command or configure .npmrc file for that. deploy script gives few extra features

• Minor package version will be automatically incremented
• Package won't be deployed if files have not changed. This is ensured by generating and comparing hash of all files to previously hash stored in .hash
• Package is locked by automatically setting property private to true|false, this is to prevent accidental deployment of package using default npm publish or yarn publish scripts.

Instructions for editor and IDE

babel-preset-frontful returns preconfigured Babel setup and can be used as any other preset in .babelrc. Keep in mind that Frontful infrastructure does not use .babelrc, but it can be useful to instruct for example Atom's source-preview plugin.

// .babelrc
{
  "presets": [
    "frontful"
  ]
}

Configuration

babel-preset-frontful can be configured by setting properties from schema to frontful.babel in package.json. Configuration can be done in several ways as provided by frontful-config, bellow are two examples

• Add frontful.babel.server.options object to package.json. Keep in mind that these options are not Babel options but ones accepted by babel-preset-frontful/provider/server

// package.json
{
  "frontful": {
    "babel": {
      "server": {
        "options": {
          ...
        }
      }
    }
  }
}

• Create ES5 config.babel.js file, and reference this file in frontful.babel in package.json

// config.eslint.js
const provider = require('babel-preset-frontful/provider/server')
module.exports = {
  server: {
    config: provider({
      ...
    })
  }
}

// package.json
{
  "frontful": {
    "babel": "./config.babel.js"
  }
}