Учебники

Angular 2 — Расширенная настройка

Октябрь 15, 2018

В этой главе мы рассмотрим другие файлы конфигурации, которые являются частью проекта Angular 2.

tsconfig.json

Этот файл используется для предоставления параметров TypeScript, используемых для проекта Angular JS. 

{ 
   "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": [ "es2015", "dom" ],
      "noImplicitAny": true,
      "suppressImplicitAnyIndexErrors": true
   }
}

Ниже приведены некоторые ключевые моменты, которые следует отметить относительно приведенного выше кода.

  • Целью компиляции является es5, и это потому, что большинство браузеров могут понимать только машинописный текст ES5.

  • Опция sourceMap используется для генерации файлов карт, которые полезны при отладке. Следовательно, во время разработки полезно сохранить этот параметр как верный.

  • «EmitDecoratorMetadata»: true и «экспериментальныйДекораторы»: true требуется для декораторов Angular JS. Если приложение Angular JS не установлено, приложение не будет компилироваться.

Целью компиляции является es5, и это потому, что большинство браузеров могут понимать только машинописный текст ES5.

Опция sourceMap используется для генерации файлов карт, которые полезны при отладке. Следовательно, во время разработки полезно сохранить этот параметр как верный.

«EmitDecoratorMetadata»: true и «экспериментальныйДекораторы»: true требуется для декораторов Angular JS. Если приложение Angular JS не установлено, приложение не будет компилироваться.

package.json

Этот файл содержит информацию о проекте Angular 2. Ниже приведены типичные настройки в файле. 

{
   "name": "angular-quickstart",
   "version": "1.0.0",
   "description": "QuickStart package.json from the documentation,
      supplemented with testing support",
   
   "scripts": {
      "build": "tsc -p src/",
      "build:watch": "tsc -p src/ -w",
      "build:e2e": "tsc -p e2e/",
      "serve": "lite-server -c=bs-config.json",
      "serve:e2e": "lite-server -c=bs-config.e2e.json",
      "prestart": "npm run build",
      "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
      "pree2e": "npm run build:e2e",
      "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" 
         --killothers --success first",
      "preprotractor": "webdriver-manager update",
      "protractor": "protractor protractor.config.js",
      "pretest": "npm run build",
      "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
      "pretest:once": "npm run build",
      "test:once": "karma start karma.conf.js --single-run",
      "lint": "tslint ./src/**/*.ts -t verbose"
   },

   "keywords": [],
   "author": "",
   "license": "MIT",
   "dependencies": {
      "@angular/common": "~2.4.0",
      "@angular/compiler": "~2.4.0",
      "@angular/core": "~2.4.0",
      "@angular/forms": "~2.4.0",
      "@angular/http": "~2.4.0",
      "@angular/platform-browser": "~2.4.0",
      "@angular/platform-browser-dynamic": "~2.4.0",
      "@angular/router": "~3.4.0",
      "angular-in-memory-web-api": "~0.2.4",
      "systemjs": "0.19.40",
      "core-js": "^2.4.1",
      "rxjs": "5.0.1",
      "zone.js": "^0.7.4"
   },

   "devDependencies": {
      "concurrently": "^3.2.0",
      "lite-server": "^2.2.2",
      "typescript": "~2.0.10",
      "canonical-path": "0.0.2",
      "tslint": "^3.15.1",
      "lodash": "^4.16.4",
      "jasmine-core": "~2.4.1",
      "karma": "^1.3.0",
      "karma-chrome-launcher": "^2.0.0",
      "karma-cli": "^1.0.1",
      "karma-jasmine": "^1.0.2",
      "karma-jasmine-html-reporter": "^0.2.2",
      "protractor": "~4.0.14",
      "rimraf": "^2.5.4",
      "@types/node": "^6.0.46",
      "@types/jasmine": "2.5.36"
   },
   "repository": {}
}

Несколько ключевых моментов, которые стоит отметить по поводу приведенного выше кода —

  • Существует два типа зависимостей: сначала это зависимости, а затем есть зависимости dev. Dev требуются в процессе разработки, а остальные необходимы для запуска приложения.

  • Команда «build: watch»: «tsc -p src / -w» используется для компиляции машинописного текста в фоновом режиме путем поиска изменений в файлах машинописного текста.

Существует два типа зависимостей: сначала это зависимости, а затем есть зависимости dev. Dev требуются в процессе разработки, а остальные необходимы для запуска приложения.

Команда «build: watch»: «tsc -p src / -w» используется для компиляции машинописного текста в фоновом режиме путем поиска изменений в файлах машинописного текста.

systemjs.config.json

Этот файл содержит системные файлы, необходимые для приложения Angular JS. Это загружает все необходимые файлы сценариев без необходимости добавлять тег сценария на html-страницы. Типичные файлы будут иметь следующий код. 

/** 
 * System configuration for Angular samples 
 * Adjust as necessary for your application needs. 
*/ 
(function (global) { 
   System.config ({ 
      paths: { 
         // paths serve as alias 
         'npm:': 'node_modules/' 
      }, 
      
      // map tells the System loader where to look for things 
      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/platformbrowser/bundles/platform-browser.umd.js', 
         '@angular/platform-browser-dynamic': 
            'npm:@angular/platform-browserdynamic/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/forms': 'npm:@angular/forms/bundles/forms.umd.js',  
         
         // other libraries 
         'rxjs':  'npm:rxjs', 
         'angular-in-memory-web-api': 
            'npm:angular-in-memory-web-api/bundles/inmemory-web-api.umd.js' 
      }, 
     
      // packages tells the System loader how to load when no filename 
         and/or no extension 
      packages: { 
         app: { 
            defaultExtension: 'js' 
         }, 
         
         rxjs: { 
            defaultExtension: 'js' 
         } 
      } 
   
   }); 
})(this);

Несколько ключевых моментов, которые стоит отметить по поводу приведенного выше кода —

‘npm:’: ‘node_modules /’ указывает местоположение в нашем проекте, где расположены все модули npm.

Отображение app: ‘app’ указывает папку, в которую загружаются все файлы наших приложений.

45
Share: