这里将用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
