npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ladjs/babelify

v8.0.1

Published

Babel browserify transform

Downloads

6

Readme

babelify Build Status

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.

Installation

$ npm install --save-dev babelify babel-core

Usage

CLI

  $ browserify script.js -o bundle.js -t [ babelify --presets [ env react ] ]

Node

var fs = require("fs");
var browserify = require("browserify");
browserify("./script.js")
  .transform("babelify", {presets: ["env", "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

Options

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 [ env react ] ]
browserify().transform("babelify", {presets: ["env", "react"]});
var babelify = require("babelify");
browserify().transform(babelify, {presets: ["env", "react"]});

Or, with the configure method:

browserify().transform(babelify.configure({
  presets: ["env", "react"]
}));

Customizing 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", {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 ommited (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");

Source maps

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 ]

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 -t [ babelify --ignore regex --only my_es6_folder ]

Babel result (metadata and others)

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 }
    });
  }
});

FAQ

Why aren't files in node_modules being transformed?

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": ["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).

Why am I not getting source maps?

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 ]

Can I use private/different babel package (like scoped babel 7)?

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.

browserify().transform("babelify", {
  presets: ["@babel/preset-env"],
  babel: require("@babel/core")
});