🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

babelify

Package Overview
Dependencies
Maintainers
2
Versions
26
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

babelify - npm Package Compare versions

Comparing version

6.4.0
to
8.0.0

33

index.js

@@ -1,5 +0,3 @@

var assign = require("object-assign");
var stream = require("stream");
var babel = require("babel-core");
var path = require("path");
var util = require("util");

@@ -18,3 +16,3 @@

this._filename = filename;
this._opts = assign({filename: filename}, opts);
this._opts = Object.assign({filename: filename}, opts);
}

@@ -41,12 +39,15 @@

Babelify.configure = function (opts) {
opts = assign({}, opts);
opts = Object.assign({}, opts);
var extensions = opts.extensions ? babel.util.arrayify(opts.extensions) : null;
var sourceMapRelative = opts.sourceMapRelative;
if (opts.sourceMap !== false) opts.sourceMap = "inline";
var sourceMapsAbsolute = opts.sourceMapsAbsolute;
if (opts.sourceMaps !== false) opts.sourceMaps = "inline";
// babelify specific options
delete opts.sourceMapRelative;
delete opts.sourceMapsAbsolute;
delete opts.extensions;
delete opts.filename;
// babelify backwards-compat
delete opts.sourceMapRelative;
// browserify specific options

@@ -57,13 +58,21 @@ delete opts._flags;

// browserify cli options
delete opts._;
// "--opt [ a b ]" and "--opt a --opt b" are allowed:
if (opts.ignore && opts.ignore._) opts.ignore = opts.ignore._;
if (opts.only && opts.only._) opts.only = opts.only._;
if (opts.plugins && opts.plugins._) opts.plugins = opts.plugins._;
if (opts.presets && opts.presets._) opts.presets = opts.presets._;
return function (filename) {
if (!babel.canCompile(filename, extensions)) {
if (!babel.util.canCompile(filename, extensions)) {
return stream.PassThrough();
}
if (sourceMapRelative) {
filename = path.relative(sourceMapRelative, filename);
}
var _opts = sourceMapsAbsolute
? Object.assign({sourceFileName: filename}, opts)
: opts;
return new Babelify(filename, opts);
return new Babelify(filename, _opts);
};
};

19

package.json
{
"name": "babelify",
"description": "Babel browserify transform",
"version": "6.4.0",
"version": "8.0.0",
"author": "Sebastian McKenzie <sebmck@gmail.com>",

@@ -15,10 +15,17 @@ "license": "MIT",

},
"dependencies": {
"babel-core": "^5.0.0",
"object-assign": "^4.0.0"
"peerDependencies": {
"babel-core": "6 || 7 || ^7.0.0-alpha || ^7.0.0-beta || ^7.0.0-rc"
},
"devDependencies": {
"browserify": "^11.0.1",
"babel-core": "^6.0.14",
"babel-plugin-transform-es3-property-literals": "^6.0.14",
"babel-plugin-transform-node-env-inline": "^6.0.14",
"babel-plugin-transform-react-display-name": "^6.0.14",
"babel-plugin-undeclared-variables-check": "^6.0.14",
"babel-preset-es2015": "^6.0.14",
"babel-preset-react": "^6.0.14",
"browserify": "^13.0.0",
"convert-source-map": "^1.1.0",
"tap": "^2.1.1"
"lodash.zipobject": "^4.1.3",
"tap": "^5.7.1"
},

@@ -25,0 +32,0 @@ "scripts": {

183

README.md

@@ -1,10 +0,12 @@

# babelify
# babelify [![Build Status](https://travis-ci.org/babel/babelify.svg?branch=master)](https://travis-ci.org/babel/babelify)
[Babel](https://github.com/babel/babel) [browserify](https://github.com/substack/node-browserify) transform
[Babel](https://github.com/babel/babel) [browserify](https://github.com/substack/node-browserify) transform.
[![Build Status](https://travis-ci.org/babel/babelify.svg?branch=master)](https://travis-ci.org/babel/babelify)
As of [Babel 6.0.0](http://babeljs.io/blog/2015/10/29/6.0.0/) there are **no plugins included by default**. For babelify to be useful, you must also include some [presets](http://babeljs.io/docs/plugins/#presets) and/or [plugins](http://babeljs.io/docs/plugins/#transform).
## Installation
$ npm install --save-dev babelify
```sh
$ npm install --save-dev babelify
```

@@ -15,3 +17,5 @@ ## Usage

$ browserify script.js -t babelify --outfile bundle.js
```sh
$ browserify script.js -o bundle.js -t [ babelify --presets [ es2015 react ] ]
```

@@ -23,85 +27,96 @@ ### Node

var browserify = require("browserify");
var babelify = require("babelify");
browserify("./script.js", { debug: true })
.transform(babelify)
browserify("./script.js")
.transform("babelify", {presets: ["es2015", "react"]})
.bundle()
.on("error", function (err) { console.log("Error : " + err.message); })
.pipe(fs.createWriteStream("bundle.js"));
```
#### [Options](https://babeljs.io/docs/usage/options)
**NOTE:** [Presets and plugins](http://babeljs.io/docs/plugins/) need to be installed as separate modules. For the above examples to work, you'd need to also install [`babel-preset-es2015`](https://www.npmjs.com/package/babel-preset-es2015) and [`babel-preset-react`](https://www.npmjs.com/package/babel-preset-react):
Selected options are discussed below. See the [babel docs](https://babeljs.io/docs/usage/options) for the complete list.
```javascript
browserify().transform(babelify.configure({
blacklist: ["regenerator"]
}))
```sh
$ npm install --save-dev babel-preset-es2015 babel-preset-react
```
### Options
Selected options are discussed below. See the [babel](http://babeljs.io/) docs for the complete list of [options](http://babeljs.io/docs/usage/options/).
Options may be passed in via standard [browserify](https://github.com/substack/node-browserify#btransformtr-opts) ways:
```sh
$ browserify -d -e script.js -t [ babelify --blacklist regenerator ]
$ browserify -t [ babelify --presets [ es2015 react ] ]
```
#### Enable Experimental Transforms
```js
browserify().transform("babelify", {presets: ["es2015", "react"]});
```
By default Babel's [experimental transforms](http://babeljs.io/docs/usage/transformers/#es7-experimental-)
are disabled. You can turn them on individually by passing `optional` as a configuration option.
```js
var babelify = require("babelify");
browserify().transform(babelify, {presets: ["es2015", "react"]});
```
```javascript
Or, with the `configure` method:
```js
browserify().transform(babelify.configure({
optional: ["es7.asyncFunctions"]
}))
presets: ["es2015", "react"]
}));
```
```sh
$ browserify -d -e script.js -t [ babelify --optional es7.asyncFunctions ]
```
#### Customizing extensions
Alternatively, you can enable an entire [TC39 category](http://babeljs.io/docs/usage/experimental/) of experimental ES7 features via the `stage` configuration option.
By default, all files with the extensions `.js`, `.es`, `.es6` and `.jsx` are compiled. You can change this by passing an array of extensions.
```javascript
browserify().transform(babelify.configure({
stage: 0
}))
**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 -d -e script.js -t [ babelify --stage 0 ]
$ browserify -t [ babelify --extensions .babel ]
```
#### Customising extensions
Now you can use:
By default all files with the extensions `.js`, `.es`, `.es6` and `.jsx` are compiled.
You can change this by passing an array of extensions.
```js
import NavBar from "nav-bar.babel";
var Panels = require("panels.babel");
```
**NOTE:** This will override the default ones so if you want to use any of them
you have to add them back.
**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](https://github.com/substack/node-browserify#browserifyfiles--opts).
```javascript
browserify().transform(babelify.configure({
```js
browserify({
extensions: [".babel"]
}))
}).transform("babelify", {
extensions: [".babel"]
});
```
```sh
$ browserify -d -e script.js -t [ babelify --extensions .babel ]
$ browserify --extensions=.babel -t [ babelify --extensions .babel ]
```
**NOTE:** Keep in mind that to get browserify to find files with extensions it doesn't include by default, you may also need to configure them there. For example, to have `require('./script')` in a browserified file resolve to a `./script.babel` file, you'd need to configure browserify to also look for the `.babel` extension. See the [`extensions` option](https://github.com/substack/node-browserify#browserifyfiles--opts) documentation.
Now you can omit the extension and compile `.babel` files:
#### Relative source maps
```js
import NavBar from "nav-bar";
var Panels = require("panels");
```
Browserify passes an absolute path so there's no way to determine what folder
it's relative to. You can pass a relative path that'll be removed from the
absolute path with the `sourceMapRelative` option.
#### Source maps
```javascript
browserify().transform(babelify.configure({
sourceMapRelative: "/Users/sebastian/Projects/my-cool-website/assets"
}))
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:
```js
browserify().transform("babelify", {
sourceMapsAbsolute: true
});
```
```sh
$ browserify -d -e script.js -t [ babelify --sourceMapRelative . ]
$ browserify -t [ babelify --sourceMapsAbsolute ]
```

@@ -113,8 +128,8 @@

browserify().transform(babelify.configure({
// Optional ignore regex - if any filenames **do** match this regex then they
// aren't compiled
// 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
// Optional only regex - if any filenames **don't** match this regex
// then they aren't compiled
only: /my_es6_folder/

@@ -125,18 +140,7 @@ }))

```sh
$ browserify -d -e script.js -t [ babelify --ignore regex --only my_es6_folder ]
$ browserify -t [ babelify --ignore regex --only my_es6_folder ]
```
#### ES6 Polyfill
#### Babel result (metadata and others)
As a convenience, the babelify polyfill is exposed in babelify. If you've got
a browserify-only package this may alleviate the necessity to have
*both* babel & babelify installed.
```javascript
// In browser code
require("babelify/polyfill");
```
#### Babel result: metadata and others
Babelify emits a `babelify` event with Babel's full result object as the first

@@ -150,5 +154,5 @@ argument, and the filename as the second. Browserify doesn't pass-through the

b.on('transform', function(tr) {
b.on("transform", function(tr) {
if (tr instanceof babelify) {
tr.once('babelify', function(result, filename) {
tr.once("babelify", function(result, filename) {
result; // => { code, map, ast, metadata }

@@ -164,4 +168,6 @@ });

This is default browserify behaviour and **can not** be overriden. A possible solution is to add:
This is the default browserify behavior.
A possible solution is to add:
```json

@@ -181,5 +187,38 @@ {

"browserify": {
"transform": [["babelify", { "optional": ["es7.asyncFunctions"] }]]
"transform": [["babelify", { "presets": ["es2015"] }]]
}
}
```
Another solution (proceed with caution!) is to run babelify as a [global](https://github.com/substack/node-browserify#btransformtr-opts) transform. Use the babel [`ignore` option](http://babeljs.io/docs/usage/options/) 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 `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`](https://github.com/substack/node-browserify#browserifyfiles--opts) 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 `debug` on, but turn off babelify's `sourceMaps`:
```js
browserify({debug: true}).transform("babelify", {sourceMaps: false});
```
```sh
$ browserify -d -t [ babelify --no-sourceMaps ]
```
.npmignore
polyfill.js