填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

Npm 套件

Workspace npm dependencies

Angular 框架、Angular CLI、Angular 應用程式所用到的元件都打包成 npm packages,並透過 npm registry 進行分發。

The Angular Framework, Angular CLI, and components used by Angular applications are packaged as npm packages and distributed via the npm registry.

你可以使用 npm CLI client 來下載並安裝這些 npm 套件,它透過 Node.js® 安裝並執行。預設情況下,Angular CLI 會使用 npm 客戶端。

You can download and install these npm packages by using the npm CLI client, which is installed with and runs as a Node.js® application. By default, the Angular CLI uses the npm client.

另外,你還可以使用 yarn 客戶端 來下載並安裝 npm 套件。

Alternatively, you can use the yarn client for downloading and installing npm packages.

參閱建立本地開發環境,以瞭解所需的 Node.jsnpm 版本。

See Local Environment Setup for information about the required versions and installation of Node.js and npm.

如果你的電腦上已經有了使用其它 Node.js 和 npm 版本的專案,可考慮使用 nvm 來管理 Node.js 和 npm 的多個版本。

If you already have projects running on your machine that use other versions of Node.js and npm, consider using nvm to manage the multiple versions of Node.js and npm.

package.json

無論使用 npm 還是 yarn 安裝的套件,都會記錄在 package.json檔案中。

Both npm and yarn install the packages that are identified in a package.jsonfile.

CLI 的 ng new 命令會在建立新的工作區的同時建立一個 package.json。 這個 package.json 用於此工作區中的所有專案,包括由 CLI 在建立工作區時建立的那個初始專案。

The CLI command ng new creates a package.json file when it creates the new workspace. This package.json is used by all projects in the workspace, including the initial app project that is created by the CLI when it creates the workspace.

最初,這個 package.json 包括一組初始套件,其中有些是 Angular 自身需要的,另一些是用來支援一些常見的應用場景。 隨著應用的演化,你可能會往 package.json 中新增甚至移除一些套件。

Initially, this package.json includes a starter set of packages, some of which are required by Angular and others that support common application scenarios. You add packages to package.json as your application evolves. You may even remove some.

package.json 檔案中的套件被分成了兩組:

The package.json is organized into two groups of packages:

程式碼函式庫開發者:預設情況下,CLI 命令 ng generate library會為新的程式碼函式庫專案建立一個 package.json。這個 package.json 會在把該程式碼函式庫發佈到 npm 時用到。 要了解更多資訊,參閱 CLI 的 wiki 頁面程式碼函式庫支援

Library developers: By default, the CLI command ng generate librarycreates a package.json for the new library. That package.json is used when publishing the library to npm. For more information, see the CLI wiki page Library Support.

Dependencies

package.json 檔案的 dependencies 區列出的套件都是執行應用時必備的。

The packages listed in the dependencies section of package.json are essential to running applications.

package.jsondependencies 區包括:

The dependencies section of package.json contains:

  • [Angular 套件:Angular 的核心和可選模組,它們的套件名稱以 @angular/ 開頭。

    Angular packages: Angular core and optional modules; their package names begin @angular/.

  • 支援套件:那些 Angular 應用執行時必需的第三方函式庫。

    Support packages: 3rd party libraries that must be present for Angular apps to run.

  • Polyfill指令碼:Polyfill指令碼負責抹平不同瀏覽器的 JavaScript 實現之間的差異。

    Polyfill packages: Polyfills plug gaps in a browser's JavaScript implementation.

要想新增新的依賴,請使用 ng add命令。

To add a new dependency, use the ng addcommand.

Angular 套件

Angular packages

新 Angular 工作區的 package.json 檔案中預設包含下列 Angular 套件。 要了解 Angular 套件的完整列表,參閱 API 參考手冊

The following Angular packages are included as dependencies in the default package.json file for a new Angular workspace. For a complete list of Angular packages, see the API reference.

套件名稱

Package name

說明

Description

@angular/animations

Angular 的動畫函式庫能讓你更容易地定義和應用頁面和列表的動畫效果。欲知詳情,參閱動畫

Angular's animations library makes it easy to define and apply animation effects such as page and list transitions. For more information, see the Animations guide.

@angular/common

Angular 開發組提供的常用服務、管道和指令。HttpClientModule也位於這裡的 @angular/common/http子目錄下。欲知詳情,參閱 HttpClient

The commonly-needed services, pipes, and directives provided by the Angular team. The HttpClientModuleis also here, in the @angular/common/httpsubfolder. For more information, see the HttpClient guide.

@angular/compiler

Angular 的範本編譯器。它能理解範本並把範本轉換成程式碼,這些程式碼可以執行並渲染應用程式。通常,你不必直接與這個編譯器打交道,而是當瀏覽器進行 JIT 編譯時,透過 platform-browser-dynamic 間接使用它。欲知詳情,參閱 AOT (預先)編譯

Angular's template compiler. It understands templates and can convert them to code that makes the application run and render. Typically you don’t interact with the compiler directly; rather, you use it indirectly via platform-browser-dynamic when JIT compiling in the browser. For more information, see the Ahead-of-time Compilation guide.

@angular/core

本框架最關鍵的執行時部件,每個應用都需要它們。包括全部元資料裝飾器(比如 Component, Directive)、依賴注入和元件生命週期等。

Critical runtime parts of the framework that are needed by every application. Includes all metadata decorators, Component, Directive, dependency injection, and the component lifecycle hooks.

@angular/forms

用於支援範本驅動表單響應式表單。要想了解你的應用最好選擇哪種方式,請參閱表單簡介

Support for both template-driven and reactive forms. For information about choosing the best forms approach for your app, see Introduction to forms.

@angular/
platform‑browser

與 DOM 和瀏覽器有關的一切,特別是那些幫助往 DOM 中渲染的部分。這個套件中還包括 bootstrapModuleFactory() 方法,該方法可以使用 AOT 編譯器建構的生產環境發佈套件來引導應用。

Everything DOM and browser related, especially the pieces that help render into the DOM. This package also includes the bootstrapModuleFactory() method for bootstrapping applications for production builds that pre-compile with AOT.

@angular/
platform‑browser‑dynamic

包含那些用來在 JIT 編譯器的客戶端上編譯並執行應用的提供者和方法。

Includes providers and methods to compile and run the app on the client using the JIT compiler.

@angular/router

當瀏覽器的 URL 變化時,路由器模組可以在應用的頁面之間進行導航。欲知詳情,參閱路由與導航

The router module navigates among your app pages when the browser URL changes. For more information, see Routing and Navigation.

支援套件

Support packages

新的 Angular 工作區的 package.json 檔案中預設包含下列支援套件。

The following support packages are included as dependencies in the default package.json file for a new Angular workspace.

套件名稱

Package name

說明

Description

rxjs

很多 Angular API 都會返回可觀察物件。RxJS 是對計劃中的 Observable 規範的實現,它正在等待 TC39 委員會來決定是否將其納入語言規範。

Many Angular APIs return observables. RxJS is an implementation of the proposed Observables specification currently before the TC39 committee, which determines standards for the JavaScript language.

zone.js

當原生 JavaScript 操作發生事件時,Angular 要依靠 zone.js 來執行 Angular 的變更檢測過程。Zone.js 是對一個規範的實現,它正在等待 TC39 委員會來決定是否將其納入語言規範。

Angular relies on zone.js to run Angular's change detection processes when native JavaScript operations raise events. Zone.js is an implementation of a specification currently before the TC39 committee that determines standards for the JavaScript language.

Polyfill指令碼套件

Polyfill packages

很多瀏覽器欠缺對 Angular 所需的某些最新 HTML 標準、特性的原生支援。 [Polyfill指令碼](https://en.wikipedia.org/wiki/Polyfill_(programming) 可以模擬這些缺失的特性。 瀏覽器支援一章中解釋了哪些瀏覽器分別需要哪些Polyfill指令碼,以及如何新增它們。

Many browsers lack native support for some features in the latest HTML standards, features that Angular requires. Polyfills can emulate the missing features. The Browser Support guide explains which browsers need polyfills and how you can add them.

DevDependencies

package.jsondevDependencies 區列出的這些套件可以幫助你在本機開發應用。 你不必把它們部署到生產環境中。

The packages listed in the devDependencies section of package.json help you develop the application on your local machine. You don't deploy them with the production application.

要想新增新的 devDependency,請使用下列命令之一:

To add a new devDependency, use either one of the following commands:

npm install --save-dev <package-name>
      
      npm install --save-dev <package-name>
    
yarn add --dev <package-name>
      
      yarn add --dev <package-name>
    

新 Angular 工作區的預設 package.json 中包含下列 devDependencies

The following devDependencies are provided in the default package.json file for a new Angular workspace.

套件名稱

Package name

說明

Description

@angular‑devkit/
build‑angular

Angular 建構工具。

The Angular build tools.

@angular/cli

Angular CLI 工具。

The Angular CLI tools.

@angular/
compiler‑cli

Angular 編譯器,Angular CLI 的 ng buildng serve 命令會呼叫它。

The Angular compiler, which is invoked by the Angular CLI's ng build and ng serve commands.

@types/...

第三方函式庫(如 Jasmine、Node.js)的 TypeScript 型別定義檔案。

TypeScript definition files for 3rd party libraries such as Jasmine and Node.js.

codelyzer

Angular 應用的風格檢查器(linter),它可以為滿足 Angular 風格指南中的規則提供保障。

A linter for Angular apps whose rules conform to the Angular style guide.

jasmine/...

用於支援 Jasmine 測試函式庫的套件。

Packages to support the Jasmine test library.

karma/...

用於支援 karma 測試執行器的套件。

Packages to support the karma test runner.

protractor

一個針對 Angular 應用的端到端 (e2e) 測試框架。基於 WebDriverJS 建構。

An end-to-end (e2e) framework for Angular apps. Built on top of WebDriverJS.

ts-node

供 Node.js 使用的 TypeScript 執行環境和 REPL。

TypeScript execution environment and REPL for Node.js.

tslint

一個靜態分析工具,它可以檢查 TypeScript 程式碼的可讀性、可維護性和功能性方面的錯誤。

A static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors.

typescript

TypeScript 語言的服務提供者,包括 TypeScript 編譯器 tsc

The TypeScript language server, including the tsc TypeScript compiler.

要了解 Angular CLI 如何處理套件的更多資訊,請參閱下列章節:

For information about how the Angular CLI handles packages see the following guides:

  • Building and serving 描述了這些套件如何協作,以進行開發期建構。

    Building and serving describes how packages come together to create a development build.

  • Deployment 中描述了這些套件如何協作,以建立一個生產環境建構。

    Deployment describes how packages come together to create a production build.