Angular 环境配置的介绍 - 18233135268/iOS-develop GitHub Wiki


Table of Contents

环境条件

  1. Node.js 要求5.0以上 npm 要求3.0以上

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    // npm start:并行运行tsc:w&lite任务
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    // 启用静态服务器
    "lite": "lite-server",
    // 安装ts定义文件,postinstall是指当npm install后,所要运行的指令
    "postinstall": "typings install",
    // tsc:编译typescript
    "tsc": "tsc",
    // tsc -w:编译typescript并监听ts文件
    "tsc:w": "tsc -w",
    // 列出本地已经安装的typing文件
    "typings": "typings"
  },
  "license": "ISC",
  // 应用运行所需要的依赖包
  // 包不再出现 angular2 字眼,所以我们在import时都是用 `@angular/core`
  "dependencies": {
    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.9",
    "bootstrap": "^3.3.6"
  },
  // 开发时所需要的依赖包
  "devDependencies": {
    "concurrently": "^2.0.0", // 用于并行运行多个任务
    "lite-server": "^2.2.0", // 静态文件服务器
    "typescript": "^1.8.10", // ts编译器
    "typings":"^0.8.1" // ts定义文件管理器
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5", // 指定生成后ES版本 
    "module": "commonjs", // 指定模块类型,这包括:commonjs、amd、system、umd、es2015
    "moduleResolution": "node", // 模块解析方式,node(也叫node.js)表示使用 import 或 export 来操作模块
    "sourceMap": true, // 是否生成sourceMap
    "emitDecoratorMetadata": true, // 支持带有装饰器的声明生成元数据
    "experimentalDecorators": true, // 支持注解
    "removeComments": false, // 移除注释
    "noImplicitAny": false // 当编译器不能根据变量的使用来推断变量类型时,直接默认为 any 类型
  },
  // 排除不编译的目录
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

typings.json

// TypeScript 定义文件,目的就是为了对一些非 TypeScript 编译器原生支持的定义做声明,ts的要求很严格,如果你使用编译器无法识别的定义会报错
{
  "ambientDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
    "node": "registry:dt/node#4.0.0+20160509154515"
  }
}

systems.config.js

/**
 * SystemJS配置文件
 */
(function(global) {
  // 别名映射表,告诉System加载器从哪找文件
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // 告诉System加载器如何加载模块
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

⚠️ **GitHub.com Fallback** ⚠️