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

web_beginner
  • 29

现在有一个User.js

main.js

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

经过gulp-babel转换后,变成

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

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

回复
阅读 12.6k
3 个回答

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

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

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

OldM
  • 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));

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏