Angular2 npm 包 - 我怎么知道要下载什么？答案

【问题标题】：Angular2 npm packages - How would I know what to download?Angular2 npm 包 - 我怎么知道要下载什么？
【发布时间】：2017-08-04 16:11:49
【问题描述】：

当我想创建一个空的（！） - non angular-cli - 应用程序时，我很难知道应该使用哪些包/库。

当我在 npmjs 中搜索 angular2 时，我得到了不需要的结果，我需要点击：

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

另外 - 即使我使用 @angular/core 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: {
      // 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',

    },

plunker 的作者是如何知道哪些软件包（除了看起来合法的common/core/http/router 软件包）要下载？

有人可以澄清一下还是我做错了？

【问题讨论】：

为什么不直接使用现有的快速启动/种子项目？
@jonrsharpe 作为一名高级开发人员——我不觉得想了解我在下载什么很奇怪——尤其是在从头开始启动 ng2 时。而且我希望事情会更容易找到 - 除非 - 再次 - 我做错了。
那你为什么不从@angular/core 开始，看看你得到了什么错误？
当您查看初始启动文件时：main.ts、app.module.ts、app.component.ts，您会发现导入语句如：import { Component } from '@angular/core'。这为您提供了有关要加载哪些模块以及为什么要加载的线索。在加载它们时，有时还需要导入一些依赖模块（即@angular/common）
从官方文档开始总是一个好主意，然后逐步缩小到您需要的唯一包。 angular.io/docs/ts/latest/quickstart.html

标签： javascript angularjs angular npm

【解决方案1】：

我理解你的痛苦，这是我在使用 Angular 一年后所知道的。

1- Angular2 是用 Javascript 编写的，因此理论上您应该能够将脚本添加到 index.html 并启动您的应用程序，但这不是首选，也不是完全记录和支持的，几乎所有 SO 问题都是在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"

你需要这五个来启动一个应用程序。

你需要核心，因为它是核心。

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

而platform-browser-dynamic 本身需要platform-browser。

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

您需要 Zonejs，因为 Angular 在所有 changeDetection 中大量使用它（为什么他们没有将它包含在核心中呢？！）

就是这样。

你会用你的打字稿代码做什么？你需要运行tcs 来编译它，为此你需要一个tsconfig.json（谷歌它）。

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

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

而且 webpack 还提供了一个本地开发服务器（无需手动安装 express 或 ...），您可以安装它，称为 webpack-dev-server，它将负责查看您的代码并运行所有 webpack 作业。

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

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

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

【讨论】：