Name: babelify
Owner: Lad
Description: Browserify transform for Babel
Forked from: noygal/babelify
Created: 2017-12-26 14:16:03.0
Updated: 2017-12-28 06:11:50.0
Pushed: 2017-12-28 06:12:48.0
Size: 158
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
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.
m install --save-dev babelify babel-core
browserify script.js -o bundle.js -t [ babelify --presets [ env react ] ]
fs = require("fs");
browserify = require("browserify");
serify("./script.js")
ransform("babelify", {presets: ["env", "react"]})
undle()
ipe(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
:
m 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:
owserify -t [ babelify --presets [ env react ] ]
s
serify().transform("babelify", {presets: ["env", "react"]});
s
babelify = require("babelify");
serify().transform(babelify, {presets: ["env", "react"]});
Or, with the configure
method:
serify().transform(babelify.configure({
esets: ["env", "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.
serify().transform("babelify", {extensions: [".babel"]});
h
owserify -t [ babelify --extensions .babel ]
Now you can use:
rt NavBar from "nav-bar.babel";
Panels = require("panels.babel");
NOTE: By default, Browserify will only lookup .js
and .json
files when the extension is ommited (like node's require
). To lookup additional extensions, use browserify's extensions
option.
serify({
tensions: [".babel"]
ransform("babelify", {
tensions: [".babel"]
h
owserify --extensions=.babel -t [ babelify --extensions .babel ]
Now you can omit the extension and compile .babel
files:
rt NavBar from "nav-bar";
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:
serify().transform("babelify", {
urceMapsAbsolute: true
h
owserify -t [ babelify --sourceMapsAbsolute ]
serify().transform(babelify.configure({
Optional ignore regex - if any filenames **do** match this regex then
they aren't compiled
nore: /regex/,
Optional only regex - if any filenames **don't** match this regex
then they aren't compiled
ly: /my_es6_folder/
h
owserify -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:
b = browserify().transform(babelify);
("transform", function(tr) {
(tr instanceof babelify) {
tr.once("babelify", function(result, filename) {
result; // => { code, map, ast, metadata }
});
node_modules
being transformed?This is the default browserify behavior.
A possible solution is to add:
rowserify": {
"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:
rowserify": {
"transform": [["babelify", { "presets": ["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:
serify().transform("babelify", {
obal: true,
nore: /\/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:
serify({debug: true}).transform("babelify");
h
owserify -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
:
serify({debug: true}).transform("babelify", {sourceMaps: false});
h
owserify -d -t [ babelify --no-sourceMaps ]
Yes, just pass it along as babel
option, you still need to install babel-core <= 6
as babelify uses support functions that were removed on babel 7.
serify().transform("babelify", {
esets: ["@babel/preset-env"],
bel: require("@babel/core")