Babel输出Angular2文件的精确副本

Question

我正在尝试使用Babel CLI将ES2015 js与Angular 2（因此它有@装饰器）编译到ES5中，以便Web浏览器可以使用它，但它只是创建了文件的精确副本（仍然使用@符号以及导入关键字）。

我使用终端中的npm run build来让babel创建boot.js文件的ES5版本。 Babel在我的package.json文件中配置如下：

{
    "name": "angular2-quickstart",
    "version": "1.0.0",
    "babel": {
        "plugins": [
            "syntax-decorators"
        ]
    },
    "scripts": {
        "start": "npm run lite",
        "lite": "lite-server",
        "build": "babel boot.js -d lib"
    },
    "license": "ISC",
    "dependencies": {
        "angular2": "2.0.0-beta.0",
        "systemjs": "0.19.6",
        "es6-promise": "^3.0.2",
        "es6-shim": "^0.33.3",
        "reflect-metadata": "0.1.2",
        "rxjs": "5.0.0-beta.0",
        "zone.js": "0.5.10"
    },
    "devDependencies": {
        "babel-cli": "^6.3.17",
        "lite-server": "^1.3.1"
    }
}

这是我尝试编译到ES5的实际JS文件：

'use strict';
import {Component, bootstrap} from 'angular2/angular2';

// Annotation section
@Component({
  selector: 'my-app',
  template: '<h1>Hello {{ name }}</h1>'
})
// Component controller
class MyApp {
  constructor() {
    this.name = 'Max';
  }
}

bootstrap(MyApp)

以下是浏览器控制台中的错误：

Uncaught SyntaxError: Unexpected token import
boot.js:2 Uncaught SyntaxError: Unexpected token import

我使用visual studio代码作为我的IDE。这是我的jsconfig.json文件，用于配置visual studio代码：

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs",
        "experimentalDecorators": true
    }
}

Answer 1

不幸的是，babel 6仍有一些问题，例如在找不到插件时无声地失败。

安装以下插件：

• flip()
• babel-plugin-syntax-decorators

在选项中包含babel-plugin-transform-decorators插件：

transform-decorators

您很可能还需要模块转换器

但如果您的代码最终是TypeScript，那么所有这些都是多余的。

Answer 2

我已经意识到我的代码是打字稿，而不是ES6 javascript。这很可能就是问题所在。