Babel node

Babel hase support for the latest version of JavaScript through syntax transformers. These allow your to use new syntax. right now without waiting for browser support. Check out ES2015 Preset to get started . Learn about ES2015

  • JSX and React

Babel has support for JSX and Flow. Check out our React preset to get started. Use it together with the babel-sublime

package to bring syntax highlighting to a whole new level.

  • Pluggable

Babel is built out of plugins. Compose your own transformation pipeline using existing plugins or write your own. Easily use a set of plugins by useing or creating a preset.Learn More

setup

  • Babel built-ins

    • CLI

      Babel comes with a built-in CLI which can be used to compile files from the command line.

      1. Installation

         npm install -g babel-cli

 babel --version

 babel-node --version

      2. Create .babelrc configurations file

      Great! You’ve configure Babel but you haven’t made it actually do anything.

      Note: Pre-6.x, Babel enabled certain transformations by default. However, Babel 6.x dones not ship with any transformations enabled. You need to explicityly tell it what transformations to run .The simplest way to do this is by using a preset, such as the ES2015 preset. 3. .babelrc

      • env option

      1. babel

        • Compile Files

        babel script.js [–watch] -o script-compiled.js –source-map

        Learn more about source maps

        babel src -d lib

      2. babel-node

        Babel comes with a second CLI which woks exactly the same as Node.js’s CLI, only it will compile ES6 code before running it.

        so you shoud not be using babel-node in production. It is unnecessarily heavy , with high memory usage due to the cache being stored

        in memory. Your will also wlwasy experience a startup performance penalty as the entire app needs to be compiled on the fly.

    • Require hook

      1. Installation

        npm install -g babel-core

      2. Usage

        require(‘babel-core/register’);

        All subsequent files required by node with the extensions .es6, .es, .jsx, and .js will be transformed by Babel. The polyfill specified in polyfill is also automatically required.

        Notes:

        1. Not suitable for libraries

        The require hook automatically hooks itself into all node requires, This will pollute the global scope and introduce conflicts, Because of this it’s not suitable for libraries, if

        however you’re writing an application then it’s completely fine to use.

      • Polyfill

        Babel includes a polyfill that includes a custom regenerator and

        core.s

               npm install babel-polyfill

       require("babel-polyfill");

        One of the ways you can use Babel is through the require hook, The requie hook will bind itself to node’’s require and automatically

        compile files on the fly. This is equivalent to CoffeeScript’s coffee-script/register

        Note: By default all requires to node_modules will be ignored. You can override this by passing an ignore regex via:

                  require("babel-register")({
            // This will override `node_modules` ignoring - you can alternatively pass
            // an array of strings to be explicitly matched or a regex / glob
            ignore: false
          });

          require("babel-register")({
            // Optional ignore regex - if any filenames **do** match this regex then they
            // aren't compiled.
            ignore: /regex/,

            // Ignore can also be specified as a function.
            ignore: function(filename) {
              if (filename === '/path/to/es6-file.js') {
                return false;
              } else {
                return true;
              }
            },

            // Optional only regex - if any filenames **don't** match this regex then they
            // aren't compiled
            only: /my_es6_folder/,

            // Setting this will remove the currently hooked extensions of .es6, `.es`, `.jsx`
            // and .js so you'll have to add them back if you want them to be used again.
            extensions: [".es6", ".es", ".jsx", ".js"]
          });

        Environment variable

        BABEL_CACHE_PATH=/foo/my-cache.json BABEL_DISABLE_CACHE=1 babel-node script.js

  • Build systems

    • webpack

      1. Installation

         npm install --save-dev babel-loader babel-core

      2. Usage

         Via config

 module: {
   loaders: [
     { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
   ]
 }
 Via loader

 var Person = require("babel!./Person.js").default;
 new Person()    ;

  • Test framework

    *. Mocha

      1. Usage

          In your package.json file make the following changes:

          {
            "scripts": {
              "test": "mocha --compilers js:babel-core/register"
            }
          }

  • Editors and IDES

    • WebStorm

      1. Usage

        in Preference Tools File watchers, click + button and select Babel file watcher fromthis list.
        Lastly, in Language & Framework JavaScript JavaScript language version. choose ECMAScript 6.

Babel 6.0.0

In February 2015. @James Kyle decided taht Babel wasn’t just going to be a ES6 transpiler. Instead. It needed to become a platform. A suite of tools designed to create the next generation of JavaScript tooling. Blown up into an entire ecosystem of tools.

documentations

packages directory

  • Opt-in Plugins Since Babel is focusing on being a platform for JavaScript tooling and not an ES2015 transpiler, we’ve decided to make alll of the plugins opt-in. This means when you install Babel it will no longer transpiler your ES2015 code by default. In order to drastically simplify the public API of Babel. each transformer is now completely independent.

  • Plugins Presets Since specifying and maintaining dozens of transformers in a config file would be a lot of work , Babel 6 is introducing the concept of Plugin Presets which group together similar plugins for easy consumptions.

      npm install --save-dev  babel-preset-es2015, babel-preset-react, babel-preset-stage-0(used to be  stage:0 in .babelrc in babel 5.x)

  • Performance Improvements

Performance continues to be one of the top priorities of Babel.

  • Plugin API

We received a lot fo feedback that the plugin API was confusing. so in Babel 6 . it’s a bit simpler. Note that this is a breaking change. but it should reduce confusion quite a bit. Note: When updating your plugins , please remember to bump your major version since this makes Babel 6 and 6 incompatible. semver is important.

Plugins

  • Presets

    1. ES2015

      $ npm install babel-preset-es2015

      Add the following line to your .babelrc file:

               {
           "presets": ["es2015"]
         }
    2. stage-0
    3. stage-1
    4. stage-2
    5. stage-3

    6. react

      $ npm install babel-preset-react

      Add the following to your .babelrc file:

               {
           "presets": ["react"]
         }

Usages

  1. Options

    babel.transform(code,options)

    options

  2. .babelrc

example:

	{
      "plugins": ["transform-react-jsx"],
      "ignore": [
        "foo.js",
        "bar/**/*.js"

         ]
    }

You can use the env option to set specific options when in a certain environment.

        {
          "env": {
            "production": {
              "plugins": ["transform-react-constant-elements"]
            }
          }
        }

The env key will taken from process.env.BABEL_ENV, when this is not avalaible then it uses process.env.NODE_ENV if even that is not available then it defaults to “development”

  • Use via package.json You can alternatively choose to specify your .babelrc config from within package.json like so:

          {
        "name": "my-package",
        "version": "1.0.0",
        "babel": {
          // my babel config here
        }
      }

How let the easynode become a public module?

Tests:

Netease demo it’ll work after done the below two steps:

  1. npm install babel-preset-es2015

  2. Add the following line to your .babelrc file:

             {
           "presets": ["es2015"]
         }

Methods:

  1. npm publish , precompile to es5,

    bin/main.js and src directory compile to es5 only once. success

    The first can run successly, but second give tips:

    [2015-11-28 18:18:01.154] [ERROR] root - [ReferenceError: _callee6 is not defined] ReferenceError: _callee6 is not defined

    so cache is doing mischief.

  2. global install, npm link,brother directory, babel-register

  3. module form , use babel-register to ignore node_modules, but have no test

Question

Allthings is normal When I first run my program ,but The second run it and will throw that I have no anything change to soucecode and configuration .

throw err msg:

	ReferenceError: _callee3 is not defined
	at _callee3 (main.js:222:20)
	at /Users/hujiabao/workspace_docker/3easynode/node_modules/co/index.js:50:46
	at new Promise (/usr/local/lib/node_modules/babel-cli/node_modules/core-js/modules/es6.promise.js:197:7)
	at co (/Users/hujiabao/workspace_docker/3easynode/node_modules/co/index.js:49:10)
	at main (main.js:25:9)
	at Object. (main.js:224:2)
	at Module._compile (module.js:430:26)
	at loader (/usr/local/lib/node_modules/babel-cli/node_modules/babel-register/lib/node.js:127:5)
	at Object.require.extensions.(anonymous function) as .js
	at Module.load (module.js:355:32)

I think of closing babel cache can solve this problem, so I run like this BABEL_DISABLE_CACHE=1 BABEL_CACHE_PATH=my-cache.json sh start.sh but the problem still exist, That’s Why ?

I would appriciate an early reply!

Anwser:

Issue easynode

before run there command, modify template1/package.json, easynode:version.

sudo sh precompile.sh

sudo sh publish.sh