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

Question

现在有一个User.js

在main.js中

import '../model/User.js';
...

经过gulp-babel转换后，变成

var _User = require('../model/test/User.js');

这里的require怎么处理？
以前用seajs，seajs中，require用来获取指定模块的接口，这里经过babel编译后的require是什么？

Answer 1

Babel 所做的只是帮你把‘ES6 模块化语法’转化为‘CommonJS 模块化语法’，其中的require exports 等是 CommonJS 在具体实现中所提供的变量。

任何实现 CommonJS 规范的环境（如 node 环境）可以直接运行这样的代码，而浏览器环境并没有实现对 CommonJS 规范的支持，所以我们需要使用打包工具（bundler）来进行打包，说的直观一点就是把所有的模块组装起来，形成一个常规的 js 文件。

常用的打包工具包括 browserify webpack rollup 等。

Answer 2

你们回答的这么久了，第一没有解决问题，第二，把问题复杂化，难道require.js用了es6语法？gulp-babel编译时跳过require.js不编译就可以正常了

        //JS es6转es5
       var jsStrem = gulp.src([config.src + '/**/**.js','!/**/require.js']);
           jsStrem.pipe(babel({presets:[es2015]}));
        if(config.minjs  === true){
            jsStrem.pipe(minjs().on('error', function (error) {
                console.log(error.message, error.lineNumber);
            }));
        }
        jsStrem.pipe(gulp.dest(config.dist));

        //单纯同步JS文件，不转es5
        gulp.src([config.src + '/**/require.js'])
            .pipe(gulp.dest(config.dist));

Answer 3

楼上解释比较清楚了。我这里补充下：

楼主使用 Babel 的时候应该引入了 preset-es2015, 这是个转码插件集合，里面包含了 transform-es2015-modules-commonjs。所以模块转换出来是 CommonJS 标准。

Babel 的作用是帮助我们转换 ES6 代码为 ES5, 但是它没有模块管理的功能，浏览器端默认也无法识别 CommonJs 规范，这就需要我们额外使用模块打包工具，为我们的代码做一些包裹，让它能在浏览器端使用。 比如 Browserify, Webpack。