Babel 所做的只是帮你把‘ES6 模块化语法’转化为‘CommonJS 模块化语法’，其中的require exports 等是 CommonJS 在具体实现中所提供的变量。
任何实现 CommonJS 规范的环境（如 node 环境）可以直接运行这样的代码，而浏览器环境并没有实现对 CommonJS 规范的支持，所以我们需要使用打包工具（bundler）来进行打包，说的直观一点就是把所有的模块组装起来，形成一个常规的 js 文件。
常用的打包工具包括 browserify webpack rollup 等。
例如：
//es6 to js,开发环境，可以相对友好的跟错误
gulp.task('react-es6-dev', function () {
gulp.src(['./src/**/*.jsx', './src/**/*.js'])
//.pipe(browserify({
// transform:['babelify','reactify']
//}))//compile JSX (superset of javascript used in react UI library) files to javascript
.pipe(react({ es6module: true }))//这里就是新加入的模块, 解析jsx用
.pipe(babel({ presets: [es2015, stage0], babelrc: false }))//es6tojs的解析器
.pipe(gulp.dest('dist'))
.pipe(webpack({
//babel编译import会转成require，webpack再包装以下代码让代码里支持require
devtool: 'cheap-module-source-map',
output: {
filename: "index.js",
},
stats: {
colors: true
},
}))
.pipe(gulp.dest('./dist/build'))
});
