Frontwerk

Compile your Javascript code with BabelJS

Frontwerk uses BabelJS under the hood to compile your Javascript so that you can write next generation Javascript and not worry about browser support.

Default configuration

You can run the following command and have BabelJS compile your Javascript.

frontwerk build

The above command assumes you have structured your project to have a src folder where your Javascript lives and a dist folder where the compiled versions will be written to.

By default, BabelJS will use the following configuration:

module.exports = {
  presets: [
    [
      'env',
      {
        targets: {
          browsers: ['last 2 version', 'ie 10', 'ie 11']
        }
      }
    ],
    'react', // if you have React as a dependency
    'flow' // if you have flow as a dependency
  ],
  plugins: ['transform-object-rest-spread', 'minify-dead-code-elimination']
};

Overriding the defaults

There are three possible ways to extend or create your BabelJS config.

  1. Create a file named .babelrc in your project root.
  2. Have an babel property in your package.json.
  3. Pass a --presets argument with your build task.

Either having a file named .babelrc and having a babel property in your package.json will mean the default configuration that ships with Frontwerk will be replaced.

Passing a --presets option, will combine your presets with the default presets and keep the others as the default.

If you don’t know how to create a .babelrc file, please have a read on the BabelJS website.

Ignore

You can have certain files be ignored by BabelJS. By default, files inside the following folders are ignored: __tests__, __mocks__.

You can override this default by passing an --ignore flag with your build command.

frontwerk build --ignore [folder]

Files to compile

Frontwerk assumes it will compile everything in the src directory. You can override this by passing the individual files to compile.

frontwerk build [files]

Destination directory

Frontwerk assumes your destination directory is dist. You can override this by passing the --out-dir flag.

frontwerk build --out-dir [folder]

CLI options

There are a couple of other sensible defaults that you can override:

Next up: Building with Webpack