使用 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: System is not defined

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

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

我已经解决了这个问题。

问题出在 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"
    ]

并将其添加到 gulp 中的 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 一起使用的转译文件。

希望这对您有所帮助。

使用 Babel（和模块 "transform-es2015-modules-systemjs"）和 SystemJS 将 Angular2 ES6 转译为 ES5

Transpiling Angular2 ES6 to ES5 using Babel (and module "transform-es2015-modules-systemjs") and SystemJS

ecmascript-6

gulp

systemjs

babeljs

angular