javascript - Angular2 npm 包 - 我如何知道要下载什么？

Question

当我想创建一个空的(!) - 非 angular-cli - 应用程序时，我发现很难知道应该使用哪些包/库。

从我搜索 angular2 开始在 npmjs 中我得到了不需要的结果，并且我需要单击:

为了到达messy list我不知道一个模块是否可以与另一个模块一起使用:

另外 - 即使我使用 @angular/core当我使用 Node.js 时，我不知道应该包含哪些文件才能使用其他组件。

举个例子 - 我想使用 HTTP -The messy list doesn't contain any http in there当我转到docs时- 我看到它来自@angular/http然后我再次进入 npmjs 并输入 @angular/http然后我使用 unpkg.com为了访问文件系统(使用 unpkg.com 的 chrome 扩展)只是为了下载 js 文件:

这非常不友好。 (更不用说软件包的更改经常发生 - 但互联网永远不会忘记)

我不想使用 angular-cli 并下载一些我不知道它们的用途(以及我是否需要它们)的东西。

所以我问:

问题

jQuery 有一个 download builder page它允许您根据您的需要选择下载内容!如何仅下载(对于 angular2)我需要的组件(及其依赖组件)？

例如 - 我正在寻找 at this basic angular 2 - plunker system.js 的 map 部分

  map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs@5.0.1',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'ts':                        'npm:plugin-typescript@5.2.7/lib/plugin.js',
      'typescript':                'npm:typescript@2.0.10/lib/typescript.js',

    },

骗子的作者如何知道要下载哪些软件包(除了 common/core/http/router 看似合法的软件包)？

有人可以澄清一下还是我做的完全错误？

Answer 1

我理解你的痛苦，这是我使用 Angular 一年后所了解到的。

1- Angular2 是用 Javascript 编写的，因此理论上您应该能够将脚本添加到您的 index.html 并启动您的应用程序，但这不是首选，也不是完全记录和支持的，而且几乎所有 SO 问题都是用 typescript 编写并回答。

首先，您需要安装 typescript :

 npm install typescript.

2- Angular 已经付出了很多努力来分离模块，但其中一些模块仍然相互交织在一起，但一般来说，以下是您需要启动的主要模块。

  '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
  '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
  '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
  "rxjs": "^5.1.0",
  "zone.js": "^0.7.6"

您需要这五个才能启动应用程序。

你需要 core ，因为它是 core 。

您需要platform-b​​rowser-dynamic来引导您的应用模块，否则您将无法运行它。

并且platform-b​​rowser-dynamic本身需要platform-b​​rowser。

您需要 rxjs，因为 Angular 几乎在每个异步函数中都大量使用它。

您需要 Zonejs，因为 Angular 在所有变更检测中大量使用它(为什么他们不将它包含在核心中？!)

就是这样。

<小时/>

你会用你的 typescript 代码做什么？您需要运行tcs来编译它，为此您需要一个tsconfig.json(谷歌它)。

现在，如果您需要在 Express 服务器中运行此代码，您可能需要一个任务来监视您的代码并为您编译它，这些天 webpack 似乎非常有前途和汇总。

因此，如果您愿意，您需要安装 webpack，您可以将其视为一个复杂的任务运行程序，可以为您捆绑生成的+压缩的代码。

Webpack 还提供了一个本地开发服务器(无需手动安装 Express 或 ...)，称为 webpack-dev-server，您可以安装它并负责监视您的代码并运行所有 webpack 作业。

我建议看看 AngularClass 的 Angular2 种子，尝试删除所有不必要的东西(业力、 Protractor 、所有这些爵士乐)，然后从那里开始。

一般来说，完成所有这些有点困难，我建议使用 cli 或 AngularClass 的种子。

顺便说一句，除非您导入它们，否则 cli 内的数百万个模块或任何这些种子都不会被捆绑，因此无论您 npm install 有多少东西，除非您将其导入您的项目。