使用 Babel(和模块 "transform-es2015-modules-systemjs")和 SystemJS 将 Angular2 ES6 转换为 ES5

Question

我在尝试使用babel模块"transform-es2015-moodules-systemjs"时收到以下错误。

当执行compileJs（）下面指定的函数以将ES6转换为ES5时，gump构建中会出现此错误。

错误：

System.register(['gulp', 'gulp-util', 'run-sequence', 'require-dir', 'del'], function (_export, _context) {

ReferenceError：系统未定义

这个package.json失败，出现gullow:

"babel": {
"presets": [
  "es2015"
],
"plugins": [
  "angular2-annotations",
  "transform-decorators-legacy",
  "transform-class-properties",
  "transform-flow-strip-types",
  "transform-es2015-modules-systemjs"
]
},

这适用于gullow，但我希望将代码转换为SystemJs识别的模块加载格式（我试图避免使用webpack和browsify），并将默认的转换文件转换为浏览器尚未识别的CommonJS：

"babel": {
"presets": [
  "es2015"
],
"plugins": [
  "angular2-annotations",
  "transform-decorators-legacy",
  "transform-class-properties",
  "transform-flow-strip-types"
]
},

吞咽到transpile的功能：

function compileJs() {
  let enableJsSourceMaps = argv['enable-js-source-maps'] || process.env['GULP_ENABLE_JS_SOURCE_MAPS'] !== undefined;
  return gulp.src([
    'src/main/webapp/modules/**/*.js'
  ])
    .pipe(gulpIf(enableJsSourceMaps, sourcemaps.init()))
    .pipe(babel())
    .pipe(gulpIf(enableJsSourceMaps, sourcemaps.write('.')))
    .pipe(gulp.dest('target/gulp/main/modules'));
}

index.html使用SystemJS:

<script>
        System.config({
            transpiler: "babel",
            babelOptions: {
                "optional": [
                    "runtime"
                ]
            },
            packages: {
                'modules': {
                    format: 'register',
                    defaultExtension: 'js'
                },
                'vendor': {
                    defaultExtension: 'js'
                }
            }
        });
        System.import('modules/config/bootstrap');
    </script>

有人能解释为什么这不起作用吗？我可能错过了什么？

Answer 1

我已经设法解决了这个问题。

问题出现在包中。json以下内容适用于整个构建，包括在ES6中编写的gull文件：

"babel": {
"presets": [
  "es2015"
],
"plugins": [
  "angular2-annotations",
  "transform-decorators-legacy",
  "transform-class-properties",
  "transform-flow-strip-types"
]
},

因此，解决方案是从package.json中删除以下内容：

"plugins": [
      "angular2-annotations",
      "transform-decorators-legacy",
      "transform-class-properties",
      "transform-flow-strip-types"
    ]

并将其添加到compileJs（）函数中，该函数只传输Angular2文件：

function compileJs() {
  let enableJsSourceMaps = argv['enable-js-source-maps'] || process.env['GULP_ENABLE_JS_SOURCE_MAPS'] !== undefined;
  return gulp.src([
    'src/main/webapp/modules/**/*.js'
  ])
    .pipe(gulpIf(enableJsSourceMaps, sourcemaps.init()))
    .pipe(babel({ plugins: [
      "angular2-annotations",
      "transform-decorators-legacy",
      "transform-class-properties",
      "transform-flow-strip-types",
      "transform-es2015-modules-systemjs" ]} ))
    .pipe(gulpIf(enableJsSourceMaps, sourcemaps.write('.')))
    .pipe(gulp.dest('target/gulp/main/modules'));
}

这将生成可与SystemJS一起使用的transpiled文件。

希望这能有所帮助。