gulp-babel编译es6遇到的问题

gulp-babel编译es6后的require怎么处理？

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'))

});