@title
搭建剖析

@intro
解析 SystemJS 本地开发环境

@description



The documentation [setup](guide/setup) procedures install a _lot_ of files.
Most of them can be safely ignored.

在[搭建](guide/setup)本地开发环境的过程中会安装*很多*文件。它们大部分都可以被忽略掉。

Application files _inside the_ **`src/`** and **`e2e/`** folders matter most to developers.

对程序员来讲最重要的是在 *`src/`* 和 *`e2e/`* 文件夹*之内*的应用文件。

Files _outside_ those folders condition the development environment.
They rarely change and you may never view or modify them.
If you do, this page can help you understand their purpose.

在这两个文件夹*之外*的文件为开发环境设定条件。
这些文件很少会需要变动，你可能永远都不需要阅览或者修改它们。


<style>
  td, th {vertical-align: top}
</style>



<table width="100%">

  <col width="10%">

  </col>

  <col width="90%">

  </col>

  <tr>

    <th>


      File

      文件
    </th>

    <th>
 

      Purpose

      用途
    </th>

  </tr>

  <tr>

    <td>
      <code>src/app/</code>
    </td>

    <td>


      Angular application files go here. 

      你的 Angular 应用文件。

      Ships with the "Hello Angular" sample's
      `AppComponent`, `AppModule`, a component unit test (`app.component.spec.ts`), and
      the bootstrap file, `main.ts`.

      "Hello Angular" 这个例子中有 `AppComponent`、`AppModule`、 一个组件单元测试 (`app.component.spec.ts`) 以及引导文件 `main.ts`。

      Try the <live-example name="setup">sample application</live-example> 
      and the <live-example name="setup" plnkr="quickstart-specs">unit test</live-example>
      as _live examples_.

      在live example中试试<live-example name="setup">范例程序</live-example>和<live-example name="setup" plnkr="quickstart-specs">单元测试</live-example>

    </td>

  </tr>

  <tr>

    <td>
      <code>e2e/</code>
    </td>

    <td>


      _End-to-end_ (e2e) tests of the application,
      written in Jasmine and run by the
      <a href="http://www.protractortest.org/" target="_blank" title="Protractor: end-to-end testing for Angular">protractor</a>
      e2e test runner.

      应用的*端对端*(e2e)测试，用 Jasmine 写成并用 <a href="http://www.protractortest.org/" target="_blank" title="Protractor:Angular 的端对端测试">protractor</a> 端对端测试运行器测试。

      Initialized with an e2e test for the "Hello Angular" sample.

      初始化后，有个“Hello Angular” 的例子的端对端测试。

    </td>

  </tr>

  <tr>

    <td>
      <code>node_modules/</code>
    </td>

    <td>


      The _npm_ packages installed with the `npm install` command.

      用 `npm install` 命令安装的 *npm* 包。

    </td>

  </tr>

  <tr>

    <td>
      <code>.editorconfig<br>
.git/<br>
.gitignore<br>
.travis.yml</code>
    </td>

    <td>


      Tooling configuration files and folders. 

      配置文件和文件夹的工具。

      Ignore them until you have a compelling reason to do otherwise.

      除非非常必要，否则可以忽略。

    </td>

  </tr>

  <tr>

    <td>
      <code>CHANGELOG.md</code>
    </td>

    <td>


      The history of changes to the _QuickStart_ repository.

      *快速起步*库的更新历史。

      Delete or ignore.

      删除或忽略。

    </td>

  </tr>

  <tr>

    <td>
      <code>favicon.ico</code>
    </td>

    <td>


      The application icon that appears in the browser tab.

      出现在浏览器标签上的应用图标。

    </td>

  </tr>

  <tr>

    <td>
      <code>index.html</code>
    </td>

    <td>


      The application host page.
      It loads a few essential scripts in a prescribed order.
      Then it boots the application, placing the root `AppComponent`
      in the custom `<my-app>` body tag.

      应用的宿主页面。
      它以特定的顺序加载一些基本脚本。
      然后它启动应用，将根`AppComponent`放置到自定义`<my-app>`标签里。

      The same `index.html` satisfies all documentation application samples.

      同一个 `index.html`满足所有文档应用例子。

    </td>

  </tr>

  <tr>

    <td>
      <code>karma.conf.js</code>
    </td>

    <td>


      Configuration for the <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma unit test runner">karma</a>
      test runner described in the [Testing](guide/testing) guide.

      在[测试](guide/testing)指南中提到的 <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma测试运行器">karma</a> 测试运行器的配置。

    </td>

  </tr>

  <tr>

    <td>
      <code>karma-test-shim.js</code>
    </td>

    <td>


      Script to run <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma unit test runner">karma</a>
      with SystemJS as described in the [Testing](guide/testing) guide.

      在[测试](guide/testing)指南中提到的 <a href="https://karma-runner.github.io/1.0/index.html" target="_blank" title="Karma测试运行器">karma</a> 测试运行器的脚本。

    </td>

  </tr>

  <tr>

    <td>
      <code>non-essential-files.txt</code>
    </td>

    <td>


      A list of files that you can delete if you want to purge your setup of the
      original QuickStart Seed testing and git maintainence artifacts.
      See instructions in the optional
      [_Deleting non-essential files_](guide/setup#non-essential "Setup: Deleting non-essential files") section.
      *Do this only in the beginning to avoid accidentally deleting your own tests and git setup!*

      这个列表中的文件在清理时可以删除，它是原始的“快速起步”种子工程中的测试和git维护文件。
      步骤参见可选的[删除非必要文件](guide/setup#non-essential "Setup: Deleting non-essential files")部分。
      *只在最初做这件事，以免不小心删除了你自己的测试文件和git配置！*
    </td>

  </tr>

  <tr>

    <td>
      <code>LICENSE</code>
    </td>

    <td>


      The open source MIT license to use this setup code in your application.

      应用的搭建代码中用到的开源 MIT 许可证。

    </td>

  </tr>

  <tr>

    <td>
      <code>package.json</code>
    </td>

    <td>


      Identifies `npm `package dependencies for the project.

      为项目指定`npm`依赖包。

      Contains command scripts for running the application,
      running tests, and more. Enter `npm run` for a listing.
      <a href="https://github.com/angular/quickstart/blob/master/README.md#npm-scripts"
         target="_blank" title="npm scripts for Angular documentation samples">Read more</a> about them.

      包含了一些命令脚本，用来运行应用、运行测试与其他。输入`npm run`来查看命令列表。
      到<a href="https://github.com/angular/quickstart/blob/master/README.md#npm-scripts" 
         target="_blank" title="Angular 文档例子的 npm 脚本">这里</a>阅读更多关于它们的说明。

    </td>

  </tr>

  <tr>

    <td>
      <code>protractor.config.js</code>
    </td>

    <td>


      Configuration for the
      <a href="http://www.protractortest.org/" target="_blank" title="Protractor: end-to-end testing for Angular">protractor</a>
      _end-to-end_ (e2e) test runner.

      <a href="http://www.protractortest.org/" target="_blank" title="Protractor: Angular 的端对端测试">protractor</a> *端对端* (e2e) 测试器运行器的配置。
    </td>

  </tr>

  <tr>

    <td>
      <code>README.md</code>
    </td>

    <td>


      Instruction for using this git repository in your project.
      Worth reading before deleting.

      项目中使用这个 git 库的说明。
      在删除前值得阅读。
    </td>

  </tr>

  <tr>

    <td>
      <code>styles.css</code>
    </td>

    <td>


      Global styles for the application. Initialized with an `<h1>` style for the QuickStart demo.

      应用的全局样式。初始化后，有个为《快速起步》演示准备的`<h1>`样式。

    </td>

  </tr>

  <tr>

    <td>
      <code>systemjs<br>.config.js</code>
    </td>

    <td>


      Tells the **SystemJS** module loader where to find modules
      referenced in JavaScript `import` statements. For example:

      为 **SystemJS** 模块加载器指定去哪儿查找在 JavaScript 的`import`语句中引用的模块。例如：

      <code-example language="ts">
        import { Component } from '@angular/core;
      </code-example>


      Don't touch this file unless you are fully versed in SystemJS configuration.

      除非你完全理解 SystemJS 的配置，不要修改它。
    </td>

  </tr>

  <tr>

    <td>
      <code>systemjs<br>.config.extras.js</code>
    </td>

    <td>


      Optional extra SystemJS configuration.
      A way to add SystemJS mappings, such as for appliation _barrels_,
      without changing the original `system.config.js`.

      可选的额外 SystemJS 配置。
      是添加 SystemJS 映射的途径，例如在无需修改原始`systemjs.config.js`的情况下为应用映射*封装桶*。  

    </td>

  </tr>

  <tr>

    <td>
      <code>tsconfig.json</code>
    </td>

    <td>


      Tells the TypeScript compiler how to transpile TypeScript source files
      into JavaScript files that run in all modern browsers.

      为 TypeScript 编译器指定如何将 TypeScript 代码转换为 JavaScript 文件，用来在所有现代浏览器中运行。  

    </td>

  </tr>

  <tr>

    <td>
      <code>tslint.json</code>
    </td>

    <td>


      The `npm` installed TypeScript linter inspects your TypeScript code
      and complains when you violate one of its rules.

      利用`npm`安装的 TypeScript 语法检查器 (linter) 检测 TypeScript 代码并在你违反它的规则时提示你。

      This file defines linting rules favored by the 
      [Angular style guide](guide/style-guide) and by the authors of the documentation.

      该文件定义了 [Angular 风格指南](guide/style-guide)与本文档站作者喜爱的语法检查规则。
    </td>

  </tr>

</table>