webpack 是否将 Angular2 打字稿编译为 javascript？答案

【问题标题】：Does webpack compile Angular2 typescript to javascript?webpack 是否将 Angular2 打字稿编译为 javascript？
【发布时间】：2016-11-06 21:56:19
【问题描述】：

我已按照 Angular2 教程添加 webpack。我收到以下错误，例如：

    [default] D:\...\node_modules\@angular\core\src\util\decorators.d.ts:11:4 
Property 'extends' of type 'Type<any> | undefined' is not assignable to string index type 'Function | any[] | Type<any>'.[default] D:\...\node_modules\@angular\platform-browser\src\dom\dom_renderer.d.ts:25:21

似乎 webpack 试图编译我引用的整个 angular 东西，这似乎有点太多了。

据我了解，我们可以使用已经构建的 Angular js 文件，而不是每次都编译 Angular（以及我想的所有其他库）？这样做是否可能/合理？

【问题讨论】：

标签： angular typescript webpack

【解决方案1】：

它会做任何你包含并告诉它去做的事情。

例如如果您直接从主模块（或其中包含的任何内容）导入 angular typescript 文件，并且如果您配置了 typescript 加载器，它将将此 typescript 转换为 javascript。

但是，如果您导入一个 javascript 模块（例如使用 import { Component } from '@angular/core'。没有尾随 .ts），它将包含该模块并且不会转译任何内容。;

您的错误也可能是类型定义的一些问题。这意味着它已经使用了 javascript 版本，但是配置/引用的 typescript 类型存在某种问题（提到了.d.ts），这意味着 typescript 编译器会报告错误。

【讨论】：

由于 --strictNullChecks 编译器选项而发生错误，所以我知道事实上，这只是这里的一个示例。我试图了解整个事情是如何运作的。先编译（ts -> js）然后使用 webpack 来避免编译库有什么缺点吗？我想我将无法使用例如然后是“angular2-template-loader”。仍然不知道我们是否可以以某种方式避免从 angular2 编译“ts”
使用预编译版本的库是默认方法。特别是如果您从 npm 获取内容，其中库大多是预编译的，并且库的入口点（在 package.json 中描述）指向 .js 文件或文件夹。如果预编译库不提供相应的类型（或者它仅通过版本可能不匹配的另一个服务提供它们），您可能会获得比直接使用 .ts 版本更糟糕的类型体验。
调试也可能更糟，因为你不能根据它的打字稿代码来调试库。但这也可以通过 sourcemaps 得到改善。
我对预编译方法没有 100% 了解，基于我提供的错误，它肯定试图在 angular2 中编译 typescript，但是现在当我运行应用程序时，我在 (webpack:/ //./~/@angular/compiler/bundles/compiler.umd.js?9df7) 这意味着它按照你说的做了：包括整个 js 包。如果这样做，遍历导入有什么意义？它在尝试编译打字稿时如何找到捆绑包？也许我可以阅读一些指南来解释所有这些技巧？
有两件事情同时发生：第一件是 webpack，它将包含的 javascript 或 typescript 包含到包中。第二个是 typescript 编译器，它还将尝试获取所有导入的类型定义并使用它们来检查您的代码。如果您包含 js 文件，它将尝试通过关联的 .d.ts 文件解析类型，该文件以打字稿形式描述模块的内容。