diff --git a/.eslintignore b/.eslintignore index dc01ae1b9e..7eaabe1d10 100644 --- a/.eslintignore +++ b/.eslintignore @@ -7,3 +7,9 @@ packages/*/lib packages/*/dist packages/*/test/fixtures packages/*/test/tmp +packages/babel-standalone/babel.js +packages/babel-standalone/babel.min.js + +# Prettier tries to insert trailing commas in function calls, which Node.js +# doesn't natively support. This causes an error when loading the Gulp tasks. +packages/babel-standalone/src/gulpTasks.js diff --git a/.gitignore b/.gitignore index f0052bad05..adf691453e 100644 --- a/.gitignore +++ b/.gitignore @@ -27,3 +27,5 @@ package-lock.json /packages/*/lib .nyc_output /babel.sublime-workspace +packages/babel-standalone/babel.js +packages/babel-standalone/babel.min.js diff --git a/.travis.yml b/.travis.yml index 61086501e5..adef236322 100644 --- a/.travis.yml +++ b/.travis.yml @@ -20,6 +20,9 @@ before_install: - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 0.28.1 script: + # Babel doesn't build correctly with npm v2 (which comes bundled with Node v4) + # so we manually upgrade to a known working npm version. + - npm install --global npm@4 - 'if [ "$JOB" = "test" ]; then make test-ci; fi' - 'if [ "$JOB" = "lint" ]; then make lint && make flow; fi' diff --git a/Gulpfile.js b/Gulpfile.js index 04535b387b..647fa4d9e0 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -9,6 +9,7 @@ const watch = require("gulp-watch"); const gutil = require("gulp-util"); const gulp = require("gulp"); const path = require("path"); +const registerBabelStandaloneTasks = require("./packages/babel-standalone/src/gulpTasks"); const base = path.join(__dirname, "packages"); const scripts = "./packages/*/src/**/*.js"; @@ -59,3 +60,5 @@ gulp.task("watch", ["build"], function() { gulp.start("build"); }); }); + +registerBabelStandaloneTasks(gulp); diff --git a/Makefile b/Makefile index 7223a0f777..c34c6d8374 100644 --- a/Makefile +++ b/Makefile @@ -10,6 +10,9 @@ export FORCE_COLOR = true build: clean rm -rf packages/*/lib ./node_modules/.bin/gulp build +ifneq ($(BABEL_ENV), "cov") + ./node_modules/.bin/gulp build-babel-standalone +endif build-dist: build cd packages/babel-polyfill; \ diff --git a/circle.yml b/circle.yml index 042b1eada4..31b3b4fddd 100644 --- a/circle.yml +++ b/circle.yml @@ -1,3 +1,8 @@ +general: + artifacts: + - "packages/babel-standalone/babel.js" + - "packages/babel-standalone/babel.min.js" + machine: node: version: @@ -14,3 +19,9 @@ dependencies: test: override: - make test-ci-coverage + # Builds babel-standalone with the regular Babel config + - make build + # test-ci-coverage doesn't test babel-standalone, as trying to gather coverage + # data for a JS file that's several megabytes large is bound to fail. Here, + # we just run the babel-standalone test separately. + - ./node_modules/mocha/bin/_mocha packages/babel-standalone/test/ --opts test/mocha.opts diff --git a/package.json b/package.json index 4d218cb845..6c831f6556 100644 --- a/package.json +++ b/package.json @@ -14,11 +14,13 @@ "babel-cli": "7.0.0-alpha.18", "babel-core": "7.0.0-alpha.18", "babel-eslint": "8.0.0-alpha.15", + "babel-loader": "^7.1.1", "babel-plugin-istanbul": "^4.1.4", "babel-preset-env": "2.0.0-alpha.18", "babel-preset-flow": "7.0.0-alpha.18", "babel-preset-stage-0": "7.0.0-alpha.18", "babel-register": "7.0.0-alpha.18", + "babylon": "7.0.0-beta.18", "browserify": "^13.1.1", "bundle-collapser": "^1.2.1", "chai": "^4.1.0", @@ -58,7 +60,8 @@ "all": true, "exclude": [ "scripts/*.js", - "packages/*/test/**" + "packages/*/test/**", + "packages/babel-standalone/**" ], "sourceMap": false, "instrument": false diff --git a/packages/babel-standalone/README.md b/packages/babel-standalone/README.md new file mode 100644 index 0000000000..ced004a500 --- /dev/null +++ b/packages/babel-standalone/README.md @@ -0,0 +1,93 @@ +babel-standalone +================ + +babel-standalone is a standalone build of Babel for use in non-Node.js environments, including browsers. It's bundled with all the standard Babel plugins and presets, and [a build of babili (babel-minify)](http://dl.vc/babili-standalone) is optionally available too. + +But why?! +========= + +It's true that using Babel through Webpack, Browserify or Gulp should be sufficient for most use cases. However, there are some valid use cases for babel-standalone: + + - Sites like [JSFiddle](https://jsfiddle.net/), [JS Bin](https://jsbin.com/), the [REPL on the Babel site](http://babeljs.io/repl/), etc. These sites compile user-provided JavaScript in real-time. + - Apps that embed a JavaScript engine such as V8 directly, and want to use Babel for compilation + - Apps that want to use JavaScript as a scripting language for extending the app itself, including all the goodies that ES2015 provides. + - Integration of Babel into a non-Node.js environment ([ReactJS.NET](http://reactjs.net/), [ruby-babel-transpiler](https://github.com/babel/ruby-babel-transpiler), [php-babel-transpiler](https://github.com/talyssonoc/php-babel-transpiler), etc). + +Installation +============ + +There are several ways to get a copy of babel-standalone. Pick whichever one you like: + +- Use it via UNPKG: https://unpkg.com/babel-standalone@6/babel.min.js. This is a simple way to embed it on a webpage without having to do any other setup. +- Install via Bower: `bower install babel-standalone` +- Install via NPM: `npm install --save babel-standalone` +- Manually grab `babel.js` and/or `babel.min.js` from the [GitHub releases page](https://github.com/Daniel15/babel-standalone/releases). Every release includes these files. +- Install it via Git: You can use the repo at https://github.com/Daniel15/babel-standalone-bower to pull a prebuilt version from Git. Note that this is generally only advised for systems that *must* pull artifacts from Git, such as Bower. + +Usage +===== + +Load `babel.js` or `babel.min.js` in your environment. This will expose [Babel's API](http://babeljs.io/docs/usage/api/) in a `Babel` object: + +```js +var input = 'const getMessage = () => "Hello World";'; +var output = Babel.transform(input, { presets: ['es2015'] }).code; +``` + +When loaded in a browser, babel-standalone will automatically compile and execute all script tags with type `text/babel` or `text/jsx`: +```html +
+ + + + +``` + +You can use the `data-plugins` and `data-presets` attributes to specify the Babel plugins/presets to use: +```html + +``` + +Note that `.babelrc` doesn't work in babel-standalone, as no file system access is available. The presets and/or plugins to use **must** be specified in the options passed to `Babel.transform`. + +Customisation +============= +Custom plugins and presets can be added using the `registerPlugin` and `registerPreset` methods respectively: + +```js +// Simple plugin that converts every identifier to "LOL" +function lolizer() { + return { + visitor: { + Identifier(path) { + path.node.name = 'LOL'; + } + } + } +} +Babel.registerPlugin('lolizer', lolizer); +``` + +Once registered, just use the name of the plugin: + +```js +var output = Babel.transform( + 'function helloWorld() { alert(hello); }', + {plugins: ['lolizer']} +); +// Returns "function LOL() { LOL(LOL); }" +``` + +Custom plugins also work for inline ` + +