typescript编译在定位ES5时输出“import”

Question

我开始用一个简单的回购来测试angularjs 1.6。但是我似乎有输出es5代码的问题，可以在没有systemjs，节点webpack等的情况下运行，即转换导出和定义和导入语句

//以下app.ts

import * as angular from 'angular'
import * as ng from 'angular'
"use strict";

module ngTypescript{
    angular.module('ngTypescript',[]).run(($rootScope:ng.IRootScopeService) =>{
        console.log($rootScope.$id);         
    });
}

//输出app.js

import * as angular from 'angular';
"use strict";
var ngTypescript;
(function (ngTypescript) {
    angular.module('ngTypescript', []).run(function ($rootScope) {
        console.log($rootScope.$id);
    });
})(ngTypescript || (ngTypescript = {}));
//# sourceMappingURL=app.js.map

没有编译错误，但从简单的html页面（没有节点）运行时，我收到以下错误

Uncaught SyntaxError: Unexpected token import

//ts config.JSON

{
      "compilerOptions": {
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "classic",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [ "es6", "dom" ],
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "allowUnreachableCode": true
      },
        "exclude": [
            "node_modules/*"
        ]
    }

我需要输出的js在不支持导出或导入的环境中运行。即不在节点后面，或使用systemjs或webpack。

the sample repo is here

Answer 1

您已在tsconfig.json中指定希望TypeScript编译器编译为ES5。这将处理ES6的东西，如箭头函数，生成器，字符串插值e.t.c.

它不会处理模块，因为module字段仍然设置为ES2015。您需要将其更改为amd，umd或system（对于systemjs）。

编辑：让我澄清一下这些模块系统是什么。 JavaScript中模块系统的需求源于JavaScript是为浏览器构建的。在早期，您可以使用脚本标记包含多个JavaScript文件：

<script type="text/javascript" src="../module.js"></script>

但这对于大型应用来说效率低下。当JavaScript使用NodeJS迁移到服务器时，CommonJS诞生了。它看起来像这样：

//Anything above this line is run once, when the project initializes
module.exports = {//your module here}

CommonJS仍然与NodeJS一起使用，但它并不像前端应用程序那么受欢迎，因为它是同步的，并且与浏览器的异步性质不匹配。 （在服务器中，您不必使XHR获取文件，它就在文件系统中，但对于浏览器来说几乎总是如此）。

为满足这一需求，AMD或异步模块定义诞生了。它看起来像这样：

define(['jquery', 'lodash', 'moment'], function ($, _, moment) {
    //Define your module here
});

AMD有一个缺点，它不能与NodeJS一起使用而没有额外的开销。并且有一些库，如片刻，在服务器和浏览器中同样使用。因此，UMD是通用模块定义的缩写，用于为模块定义建立统一的接口。

截至2019年，ES2015模块的官方标准化似乎正在取得进展，而CommonJS不会很快消失。就TypeScript而言，我建议为服务器应用程序编译CommonJS，为前端应用程序编译AMD用于客户端。如果您使用像Angular这样的框架，那么ES2015模块是更好的选择，因为它们允许树木抖动和死代码消除

检查this了。只需搜索“模块”，您就会看到可用的选项

Answer 2

你需要安装angular-cli（通过做npm install -g @angular/cli） 或者通过browserify或webpack传递您现在拥有的构建。

CLI可用于生成在ng new PROJECT_NAME中具有一些有用的npm脚本的项目（package.json）。

编辑：没看过它是关于Angular的旧版本。使用browserify / webpack的选项仍然存在。