使用Babel（和模塊“ transform-es2015-modules-systemjs”）和SystemJS將Angular2 ES6轉換為ES5

Question

嘗試使用babel模塊“ transform-es2015-modules-systemjs”時出現以下錯誤。

執行compileJs（）下面指定的函數將ES6轉換為ES5時，在gulp構建中會發生此錯誤。

錯誤：

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

ReferenceError：系統未定義

這個package.json失敗並帶有gulp：

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

這適用於gulp，但是我希望將代碼轉換為SystemJs識別用於模塊加載的格式（我試圖避免使用webpack和browsify）以及默認的轉換為CommonJS的瀏覽器尚無法識別的代碼：

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

gulp的功能：

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

使用SystemJS的index.html ：

<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

我設法解決了這個問題。

問題在package.json中 ，以下內容適用於整個構建，包括用ES6編寫的gulp文件：

"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"
    ]

並將其添加到僅對Angular2文件進行轉譯的gulp中的compileJs（）函數中：

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一起使用的轉譯文件。

希望這可以幫助。