Question

我通过选择babylon7-7.0.0-beta.12和babelv7-7.0.0-alpha.12在ASTExplorer中尝试了以下Angular组件代码（在TypeScript中），并解析，转换并生成确切的输出：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {

  data: [
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5'
  ];

  constructor() { }

  ngOnInit() {
  }

}

但是，当我尝试使用Babel的transformFileSync API解析并使用相同版本的Babel和Babylon转换相同的代码时，我收到以下错误：

This experimental syntax requires enabling one of the following parser plugin(s): 'decorators, decorators2' (3:0)
  1 | import { Component, OnInit } from '@angular/core';
  2 | 
> 3 | @Component({
    | ^

所以，我将以下插件传递给API（因为有更多错误）：

plugins: [
            ['transform-decorators-legacy'],
            ['transform-typescript'],
            ['transform-class-properties']
]

但是，这会产生一个与输入代码非常不同的输出：

var _dec, _class;

import { Component } from '@angular/core';
export let ListComponent = (_dec = Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css']
}), _dec(_class = class ListComponent {
  constructor() {
    this.data = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
  }

  ngOnInit() {}

}) || _class);

非常感谢您帮助确定根本原因，以便我能够解析Angular TypeScript代码并构建我的进一步转换逻辑。

Answer 1

要获得与输入相同的输出，请不要使用任何transform插件，只需babel-plugin-syntax-typescript即可。

Babel的TypeScript解析不一致

1 个答案: