巴贝尔1.4.3 Angular2文件的精确复制 [英] Babel Outputting Exact Copy of Angular2 File

问题描述

我想用巴贝尔CLI编译ES2015 JS用角2（所以它有@装饰）到ES5，以便它可以通过Web浏览器使用，但它只是创建该文件的精确副本（仍然使用@符号以及导入键字）。

我用 NPM运行构建从终端造成通天创建boot.js文件的ES5版本。巴贝尔被配置在我的package.json文件，像这样：

  {
    名：angular2-快速入门
    版本：1.0.0
    巴别塔：{
        插件：[
            语法装饰
        ]
    }，
    脚本：{
        开始：故宫运行精简版
        精简版：精简版服务器
        建：巴别塔boot.js -d LIB
    }，
    许可证：ISC
    依赖：{
        angular2：2.0.0-beta.0
        systemjs：0.19.6，
        ES6-承诺：^ 3.0.2
        ES6-垫片：^ 0.33.3
        反映了元数据：0.1.2
        rxjs：5.0.0-beta.0
        zone.js：0.5.10
    }，
    devDependencies：{
        巴别塔-CLI：^ 6.3.17
        精简版服务器：^ 1.3.1
    }
}
 

下面是我试图编译ES5实际的JS文件：

 使用严格的;
进口{组件，引导}从'angular2 / angular2';//注释部分
@零件（{
  选择：我的应用，
  模板：'＆LT; H1＆GT;您好{{名}}＆LT; / H1＆GT;'
}）
//组件控制器
类的MyApp {
  构造函数（）{
    this.name ='最大';
  }
}引导（MyApp的）
 

下面是浏览器控制台错误：

 未捕获的SyntaxError：意外的令牌进口
boot.js：2未捕获的SyntaxError：意外的令牌进口
 

我使用的Visual Studio code作为我的IDE。这是我jsconfig.json文件来配置的Visual Studio code：

  {
    compilerOptions：{
        目标：ES6
        模块：CommonJS的
        experimentalDecorators：真
    }
}
 

解决方案

不幸的是巴贝尔6仍存在一些问题，比如默默失败时没有找到一个插件。

安装以下插件：

• 通天-插件语法，装饰


• 通天 - 插件 - 转换 - 装饰

包含变换装饰在选项插件太：

 插件：[
    语法装饰
    变换装饰
]
 

您很有可能需要一个模块变压器以及

---

但所有这一切都是多余的，如果你的code是最终打字稿。

I am trying to use Babel CLI to compile ES2015 js with Angular 2 (so it has @ decorators) into ES5 so that it can be used by web browsers, but it just creates an exact copy of the file (still uses @ symbols as well as the import key word).

I use npm run build from the terminal to cause babel to create an ES5 version of the boot.js file. Babel is configured in my package.json file like so:

{
    "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"
    }
}

Here is the actual JS file I am trying to compile to ES5:

'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)

Here is the error in the browser console:

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

I am using visual studio code as my IDE. Here is my jsconfig.json file to configure visual studio code:

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

解决方案

Unfortunately babel 6 still has some issues, for example failing silently when a plugin is not found.

Install the following plugins:

• babel-plugin-syntax-decorators
• babel-plugin-transform-decorators

Include transform-decorators plugin too in the options:

"plugins": [
    "syntax-decorators",
    "transform-decorators"
]

Most likely you will need a module transformer as well

---

But all of this is superfluous if your code is eventually TypeScript.

这篇关于巴贝尔1.4.3 Angular2文件的精确复制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！