Babel browserify transform
npm install babelify-cacheBabel browserify transform.
As of Babel 6.0.0 there are no plugins included by default. For babelify to be useful, you must also include some presets and/or plugins.
``shBabel 7
$ npm install --save-dev babelify @babel/core
Usage
$3
sh
$ browserify script.js -o bundle.js -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] --plugins [ @babel/plugin-transform-class-properties ] ]
`$3
javascript
var fs = require("fs");
var browserify = require("browserify");
browserify("./script.js")
.transform("babelify", {presets: ["@babel/preset-env", "@babel/preset-react"]})
.bundle()
.pipe(fs.createWriteStream("bundle.js"));
`NOTE: Presets and plugins need to be installed as separate modules. For the above examples to work, you'd need to also install
and @babel/preset-react:`sh
$ npm install --save-dev @babel/preset-env @babel/preset-react
`$3
Selected options are discussed below. See the babel docs for the complete list of options.
Options may be passed in via standard browserify ways:
sh
$ browserify -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] ]
`js
browserify().transform("babelify", {presets: ["@babel/preset-env", "@babel/preset-react"]});
`js
var babelify = require("babelify");
browserify().transform(babelify, {presets: ["@babel/preset-env", "@babel/preset-react"]});
`Or, with the
method:`js
browserify().transform(babelify.configure({
presets: ["@babel/preset-env", "@babel/preset-react"]
}));
`#### Customizing extensions
By default, all files with the extensions
, .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.
`js
browserify().transform("babelify", {extensions: [".babel"]});
`sh
$ browserify -t [ babelify --extensions .babel ]
`Now you can use:
js
import NavBar from "nav-bar.babel";
var Panels = require("panels.babel");
`NOTE: By default, Browserify will only lookup
and .json files when the extension is omitted (like node's require). To lookup additional extensions, use browserify's extensions option.`js
browserify({
extensions: [".babel"]
}).transform("babelify", {
extensions: [".babel"]
});
`sh
$ browserify --extensions=.babel -t [ babelify --extensions .babel ]
`Now you can omit the extension and compile
files:`js
import NavBar from "nav-bar";
var Panels = require("panels");
`#### Source maps
By default, browserify sets the source map sources paths relative to the basedir (or to
if not set). To make the sources paths absolute, set the sourceMapsAbsolute option on babelify:`js
browserify().transform("babelify", {
sourceMapsAbsolute: true
});
`sh
$ browserify -t [ babelify --sourceMapsAbsolute ]
`#### Additional options
javascript
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/
}))
`sh
$ browserify -t [ babelify --ignore regex --only my_es6_folder ]
`#### Babel result (metadata and others)
Babelify emits a
event with Babel's full result object as the first
argument, and the filename as the second. Browserify doesn't pass-through the
events emitted by a transform, so it's necessary to get a reference to the
transform instance before you can attach a listener for the event:`js
var b = browserify().transform(babelify);b.on("transform", function(tr) {
if (tr instanceof babelify) {
tr.once("babelify", function(result, filename) {
result; // => { code, map, ast, metadata }
});
}
});
`FAQ
$3
This is the default browserify behavior.
A possible solution is to add:
json
{
"browserify": {
"transform": ["babelify"]
}
}
`to the root of all your modules
that you want to be transformed. If you'd like to
specify options then you can use:`json
{
"browserify": {
"transform": [["babelify", { "presets": ["@babel/preset-env"] }]]
}
}
`Another solution (proceed with caution!) is to run babelify as a global transform. Use the babel
option to narrow the number of files transformed:`js
browserify().transform("babelify", {
global: true,
ignore: /\/node_modules\/(?!app\/)/
});
`The above example will result in a transform that also includes the
module in node_modules: the global flag transform all files, and the ignore regular expression then excludes all those in the node_modules directory except those that are in node_modules/app (since ?! will match if the given suffix is absent).$3
debug option:`js
browserify({debug: true}).transform("babelify");
`sh
$ browserify -d -t [ babelify ]
`If you want the source maps to be of the post-transpiled code, then leave
on, but turn off babelify's sourceMaps:`js
browserify({debug: true}).transform("babelify", {sourceMaps: false});
`sh
$ browserify -d -t [ babelify --no-sourceMaps ]
``