Babel 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.
# Babel 7
$ npm install --save-dev babelify @babel/core
# Babel 6
$ npm install --save-dev babelify@8 babel-core$ browserify script.js -o bundle.js -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] --plugins [ @babel/plugin-transform-class-properties ] ]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 @babel/preset-env and @babel/preset-react:
$ npm install --save-dev @babel/preset-env @babel/preset-reactSelected options are discussed below. See the babel docs for the complete list of options.
Options may be passed in via standard browserify ways:
$ browserify -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] ]browserify().transform("babelify", {presets: ["@babel/preset-env", "@babel/preset-react"]});var babelify = require("babelify");
browserify().transform(babelify, {presets: ["@babel/preset-env", "@babel/preset-react"]});Or, with the configure method:
browserify().transform(babelify.configure({
presets: ["@babel/preset-env", "@babel/preset-react"]
}));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", {extensions: [".babel"]});$ browserify -t [ babelify --extensions .babel ]Now you can use:
import NavBar from "nav-bar.babel";
var Panels = require("panels.babel");NOTE: By default, Browserify will only lookup .js and .json files when the extension is omitted (like node's require). To lookup additional extensions, use browserify's extensions option.
browserify({
extensions: [".babel"]
}).transform("babelify", {
extensions: [".babel"]
});$ browserify --extensions=.babel -t [ babelify --extensions .babel ]Now you can omit the extension and compile .babel files:
import NavBar from "nav-bar";
var Panels = require("panels");By default, browserify sets the source map sources paths relative to the basedir (or to process.cwd() if not set). To make the sources paths absolute, set the sourceMapsAbsolute option on babelify:
browserify().transform("babelify", {
sourceMapsAbsolute: true
});$ browserify -t [ babelify --sourceMapsAbsolute ]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 -t [ babelify --ignore regex --only my_es6_folder ]Babelify emits a babelify 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:
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 }
});
}
});This is the default browserify behavior.
A possible solution is to add:
{
"browserify": {
"transform": ["babelify"]
}
}to the root of all your modules package.json that you want to be transformed. If you'd like to
specify options then you can use:
{
"browserify": {
"transform": [["babelify", { "presets": ["@babel/preset-env"] }]]
}
}Another solution (proceed with caution!) is to run babelify as a global transform. Use the babel ignore option to narrow the number of files transformed:
browserify().transform("babelify", {
global: true,
ignore: /\/node_modules\/(?!app\/)/
});The above example will result in a transform that also includes the app 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).
To use source maps, enable them in browserify with the debug option:
browserify({debug: true}).transform("babelify");$ browserify -d -t [ babelify ]If you want the source maps to be of the post-transpiled code, then leave debug on, but turn off babelify's sourceMaps:
browserify({debug: true}).transform("babelify", {sourceMaps: false});$ browserify -d -t [ babelify --no-sourceMaps ]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent