Ecmascript 6 如何在没有decorator语法的情况下编写angular2？

我大致遵循/quickstart for

Angular2

在

ES6

中编写我的应用程序，但无法使分解器工作

entry.js app.component.js 错误 问题

• 我不关心如何使用

  装饰器

  语法，所以我可以重写它来使用ES6/ES2015吗

---

您可以使用ES5语法：

import * as ng from 'angular2/core';

const SomeComponent = ng
.Component({ /* ... */})
.View({ /* ... */ })
.Class({
    constructor() {}
});

const SomeDirective = ng
.Directive({ /* ... */ })
.Class({
    constructor() {}
});

因此，对于您的情况，它将是（参见）：

export const AppComponent=Component({
选择器：“我的应用程序”，
模板：“你好{{name}”
})
.类({
构造函数（）{
this.name='Max'；
console.log（this.name）；
}
});

---

PS但是如果我是你，我会尝试解决这个问题并继续使用ES7装饰程序。也许您忘记了执行npm安装？

您可以使用ES5语法：

import * as ng from 'angular2/core';

const SomeComponent = ng
.Component({ /* ... */})
.View({ /* ... */ })
.Class({
    constructor() {}
});

const SomeDirective = ng
.Directive({ /* ... */ })
.Class({
    constructor() {}
});

因此，对于您的情况，它将是（参见）：

export const AppComponent=Component({
选择器：“我的应用程序”，
模板：“你好{{name}”
})
.类({
构造函数（）{
this.name='Max'；
console.log（this.name）；
}
});

---

PS但是如果我是你，我会尝试解决这个问题并继续使用ES7装饰程序。可能您忘记了执行npm安装？

这是因为您使用的是Babel 6，并且装饰程序目前已被禁用，但您可以使用传统插件

transform decorators legacy

。禁用该功能的原因是语法在不久的将来将发生变化

这是因为您使用的是Babel 6，目前已禁用装饰程序，但您可以使用传统插件

transform decorators legacy

。禁用该功能的原因是语法在不久的将来将发生变化

无法让他们在我的配置上工作不完整，现在生成时没有错误，但得到了BaseException查看日志和文件无法让他们在我的配置上工作不完整，现在生成时没有错误，但得到了BaseException查看日志和文件

{
    "scripts": {
        "build:app": "browserify -e ./app/index.js -o ./dist/app.js",
    },
    "devDependencies": {
        "babel-core": "6.3.x",
        "babel-plugin-angular2-annotations": "^3.0.3",
        "babel-plugin-transform-decorators": "^6.3.13",
        "babel-preset-es2015": "6.3.x",
        "babelify": "7.2.x",
        "cpy": "3.4.x",
    },
    "babel": {
        "presets": [
            "es2015"
        ],
        "plugins": [
            "angular2-annotation",
            "transform-decorators"
        ]
    },
    "browserify": {
        "transform": [
            [
                "babelify",
                {
                    "presets": [
                        "es2015"
                    ],
                    "plugins": [
                        "angular2-annotation",
                        "transform-decorators"
                    ]
                }
            ]
        ]
    }
}

npm run build:app

> ng2-app@0.0.2 build:app /data/projects/ng2-app
> browserify -e ./app/index.js -o ./dist/app.js

ReferenceError: Unknown plugin "angular2-annotation" specified in "/data/projects/ng2-app/package.json" at 0, attempted to resolve relative to "/data/projects/ng2-app" while parsing file: /data/projects/ng2-app/app/index.js
    at /data/projects/ng2-app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:193:17
    at Array.map (native)
    at Function.normalisePlugins (/data/projects/ng2-app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:173:20)
    at OptionManager.mergeOptions (/data/projects/ng2-app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:271:36)
    at OptionManager.addConfig (/data/projects/ng2-app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:221:10)
    at OptionManager.findConfigs (/data/projects/ng2-app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:370:30)
    at OptionManager.init (/data/projects/ng2-app/node_modules/babel-core/lib/transformation/file/options/option-manager.js:412:12)
    at File.initOptions (/data/projects/ng2-app/node_modules/babel-core/lib/transformation/file/index.js:191:75)
    at new File (/data/projects/ng2-app/node_modules/babel-core/lib/transformation/file/index.js:122:22)
    at Pipeline.transform (/data/projects/ng2-app/node_modules/babel-core/lib/transformation/pipeline.js:42:16)

npm ERR! Linux 3.13.0-71-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "build:app"
npm ERR! node v5.3.0
npm ERR! npm  v3.5.3
npm ERR! code ELIFECYCLE

import * as ng from 'angular2/core';

const SomeComponent = ng
.Component({ /* ... */})
.View({ /* ... */ })
.Class({
    constructor() {}
});

const SomeDirective = ng
.Directive({ /* ... */ })
.Class({
    constructor() {}
});