JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 724753
  • Score
    100M100P100Q179057F

Babel browserify plugin

Package Exports

  • babelify
  • babelify/polyfill

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (babelify) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

babelify

Babel browserify plugin

Installation

$ npm install --save-dev babelify

Usage

CLI

$ browserify script.js -t babelify --outfile bundle.js

Node

var fs = require("fs");
var browserify = require("browserify");
var babelify = require("babelify");
browserify({ debug: true })
  .transform(babelify)
  .require("./script.js", { entry: true })
  .bundle()
  .on("error", function (err) { console.log("Error : " + err.message); })
  .pipe(fs.createWriteStream("bundle.js"));

Options

browserify().transform(babelify.configure({
  blacklist: ["generators"]
}))
$ browserify -d -e script.js -t [ babelify --blacklist generators ]

Enable Experimental Transforms

By default 6to5's experimental transforms are disabled. You can turn them on by passing experimental as a configuration option.

browserify().transform(babelify.configure({
  experimental: true
}))
$ browserify -d -e script.js -t [ babelify --experimental ]

Customising extensions

By default all files with the extensions .js, .es, '.es6 and .jsx are compiled. You can change this by passing an array of extensions.

NOTE: This will override the default ones so if you want to use any of them you have to add them back.

browserify().transform(babelify.configure({
  extensions: [".6to5"]
}))
$ browserify -d -e script.js -t [ babelify --extensions .6to5 ]

Relative source maps

Browserify passes an absolute path so there's no way to determine what folder it's relative to. You can pass a relative path that'll be removed from the absolute path with the sourceMapRelative option.

browserify().transform(babelify.configure({
  sourceMapRelative: "/Users/sebastian/Projects/my-cool-website/assets"
}))
$ browserify -d -e script.js -t [ babelify --sourceMapRelative . ]

Additional options

browserify().transform(babelify.configure({
  // Optional ignore regex - if any filenames **do** match this regex then they
  // aren't compiled
  ignore: /regex/,

  // Optional only regex - if any filenames **don't** match this regex then they
  // aren't compiled
  only: /my_es6_folder/
}))
$ browserify -d -e script.js -t [ babelify --ignore regex --only my_es6_folder ]

ES6 Polyfill

As a convenience, the babelify polyfill is exposed in babelify. If you've got a browserify-only package this may alleviate the necessity to have both babel & babelify installed.

// In browser code
require("babelify/polyfill");