这里将用redux作为一个列子。

新建一个文件夹然后

express
npm install
npm install redux

如果使用import等语法需要用babel转义

Babel的配置文件是.babelrc，存放在项目的根目录下。

{
  "presets": [ "es2015"]
}

ES2015转码规则

$ npm install --save-dev babel-preset-es2015

Babel提供babel-cli工具，用于命令行转码。
它的安装命令如下。

$ npm install --global babel-cli

新建example.js 代码如下

import { createStore } from 'redux';

function counter(state = 0, action) {
  switch (action.type) {
case 'INCREMENT':
  return state + 1;
case 'DECREMENT':
  return state - 1;
default:
  return state;
  }
}

const store = createStore(counter);

let currentValue = store.getState();

const listener = () => {
  const previousValue = currentValue;
  currentValue = store.getState();
  console.log('pre state:', previousValue, 'next state:', currentValue);
};

store.subscribe(listener);


store.dispatch({ type: 'INCREMENT' });

store.dispatch({ type: 'INCREMENT' });

store.dispatch({ type: 'DECREMENT' });

然后babel example.js 替换新的js

'use strict';

var _redux = require('redux');

function counter() {
  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
  var action = arguments[1];

  switch (action.type) {
case 'INCREMENT':
  return state + 1;
case 'DECREMENT':
  return state - 1;
default:
  return state;
  }
}

var store = (0, _redux.createStore)(counter);

var currentValue = store.getState();

var listener = function listener() {
  var previousValue = currentValue;
  currentValue = store.getState();
  console.log('pre state:', previousValue, 'next state:', currentValue);
};

store.subscribe(listener);

store.dispatch({ type: 'INCREMENT' });

store.dispatch({ type: 'INCREMENT' });

store.dispatch({ type: 'DECREMENT' });

打开dev tool 进行打断点处理

TIM截图20180410165544.png