Babelbrowserify 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 ] ]

varfs=require("fs");varbrowserify=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-react

Selected 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"]});

varbabelify=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:

importNavBarfrom"nav-bar.babel";varPanels=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:

importNavBarfrom"nav-bar";varPanels=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 compiledignore: /regex/,// Optional only regex - if any filenames **don't** match this regex// then they aren't compiledonly: /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:

varb=browserify().transform(babelify);b.on("transform",function(tr){if(trinstanceofbabelify){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 ]