javascript - gulp-bable转换es6module语法

Question

我用es6的module语法写了如下代码：

import {$} from '../../bower_components/jquery/dist/jquery';
$(document).ready(function(){
    $('body').append($('<p>hello es6 module</p>'));
});

不知道对不对，然后我想用gulp自动化工具的gulp-babel来将它转换成AMD规范的es5文件，我的gulp babel任务配置如下：

//babel转换es2015到es5
gulp.task('babel',function(){
   return gulp.src("app/js/*.js")// ES6 源码存放的路径
    .pipe(babel({
        presets: ['es2015'],
        modules: "amd"}))
    .pipe(gulp.dest("build/js")); //转换成 ES5 存放的路径
   });

已经安装gulp-babel和babel-preset-es2015，之前没写模块是没问题的，写了模块后转换就报错了

然后我又安装了babel的transform-es2015-modules-amd插件，结果还是报上图的错，请问是怎么回事呢，谢谢大家

Answer 1

babel 版本是什么

我用babelify

gulp.task('browserify', ['browserify-vendor'], () =>
  browserify('app/main.js')
    .external(dependencies)
    .transform(babelify,{ presets: ["es2015", "react"]}) //注意这里，只有加上presets配置才能正常编译
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps:true }))
    .pipe(gulpif(production, uglify({ mangle: false })))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('public/js'))
);

Answer 2

少年，还是用 webpack 吧，可以直接指定 各种 es6的转换插件