使用 Babel（和模块“transform-es2015-modules-systemjs”）和 SystemJS 将 Angular2 ES6 转换为 ES5答案

【问题标题】：Transpiling Angular2 ES6 to ES5 using Babel (and module "transform-es2015-modules-systemjs") and SystemJS使用 Babel（和模块“transform-es2015-modules-systemjs”）和 SystemJS 将 Angular2 ES6 转换为 ES5
【发布时间】：2016-05-04 06:43:21
【问题描述】：

尝试使用 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'));
}

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>

谁能解释为什么这不起作用，我可能会错过什么？

【问题讨论】：

"System is not defined" 表示你需要polyfill System. github.com/systemjs/systemjs
我不是 system.js 的专家，但您似乎可以使用<script> 标签复制和加载node_modules/systemjs/dist/system.js 或system-csp-production.js。
感谢您的建议，问题不在 index.html 中，我把它放在那里是为了展示我在转译后如何使用 javascript。我正在使用脚本标签将所需的 SystemJS 文件包含到应用程序中。在 gulp 中运行函数转译时出现错误。
啊，我明白了！我应该仔细阅读错误信息。无论如何很高兴它有效！

标签： angular gulp ecmascript-6 babeljs systemjs

【解决方案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 一起使用的转译文件。

希望这会有所帮助。

【讨论】：