babel transformation and plugin

[JHinW]

https://github.com/wangjinisda/react-webpack-babel-starter/blob/redux-router/package.json

[JHinW]

{
  "presets": [
    ["es2015", {"modules": false}], // webpack understands the native import syntax, and uses it for tree shaking
    "stage-2",
    // Specifies what level of language features to activate.
    // Stage 2 is "draft", 4 is finished, 0 is strawman.
    // See https://tc39.github.io/process-document/

    "react" // Transpile React components to JavaScript
  ],
  "plugins": [
    "react-hot-loader/babel", // Enables React code to work with HMR.
     "transform-object-assign"
  ],
  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

[JHinW]

if you don't specify any plugins/presets, Babel will just return the original source code.

[JHinW]

Learn ES2015 from this link

[JHinW]

Destructuring in ES2015

// list matching
var [a, ,b] = [1,2,3];
a === 1;
b === 3;

// object matching
var { op: a, lhs: { op: b }, rhs: c }
       = getASTNode()

// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()

// Can be used in parameter position
function g({name: x}) {
  console.log(x);
}
g({name: 5})

// Fail-soft destructuring
var [a] = [];
a === undefined;

// Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1;

// Destructuring + defaults arguments
function r({x, y, w = 10, h = 10}) {
  return x + y + w + h;
}
r({x:1, y:2}) === 23

[JHinW]

Generators see this link

Generators simplify iterator-authoring using function* and yield*. A function declared as function returns a Generator instance. Generators are subtypes of iterators which include additional next and throw**. These enable values to flow back into the generator, so yield is an expression form which returns a value (or throws).

summary:

from function* you can get iteratable expresssions with which you can get value and pass any value to generator runtime.

[JHinW]

Understand Tail calls from this link

function factorial(n, acc = 1) {
    "use strict";
    if (n <= 1) return acc;

     //  add by jin
     //  try to calculate value from Call-Back Func.
    return factorial(n - 1, n * acc);
}

// Stack overflow in most implementations today,
// but safe on arbitrary inputs in ES2015
factorial(100000)

show my own tails call coding exp:

function path3(n, tree, callBack) {
    if(tree.isEmpty()) callBack(list("no found")) ;
    if(tree.head && tree.head ==n) callBack(list());
    if(tree.head && tree.head >n) path3(n, tree.tail.head, function(val){
        if(val.isErrr){

        }
        callBack(conc("left",val));
    });
    if(tree.head && tree.head <n)  path3(n, tree.tail.tail.head, function(val){
        callBack(conc("right",val));
    });
} 

path3(170, tree, function(r){
    console.log("xssss");
    console.log(r.toString());
});

[JHinW]

you need to know when the recursion should be over and what should be processed if it need to continue.