對angular項目中的一些文件的概述
angular-cli.json
Angular CLI 的配置文件。 在這個文件中，你可以設置一系列默認值，還可以配置項目編譯時要包含的那些文件。
karma.conf.js
karma 測試運行器的配置。
protractor.config.js
protractor 端對端 (e2e) 測試器運行器的配置。
package-lock.json
package-lock.json是當 node_modules 或 package.json 發生變化時自動生成的文件。這個文件主要功能是確定當前安裝的包的依賴，以便後續重新安裝的時候生成相同的依賴，而忽略項目開發過程中有些依賴已經發生的更新。
package.json
爲項目指定 npm 依賴包。包含了一些命令腳本，用來運行應用、運行測試與其他。
tsconfig.json
爲 TypeScript 編譯器指定如何將 TypeScript 代碼轉換爲 JavaScript 文件，用來在所有現代瀏覽器中運行。
tslint.json
利用 npm 安裝的 TypeScript 語法檢查器 (linter) 檢測 TypeScript 代碼並在你違反它的規則時提示你。
文件夾e2e/
應用的端對端(e2e)測試，用 Jasmine 寫成並用 protractor 端對端測試運行器測試。
文件夾node_modules/
用 npm install 命令安裝的 npm 包。
polyfills.ts
不同的瀏覽器對 Web 標準的支持程度也不同。 膩子腳本（polyfill）能把這些不同點進行標準化。 你只要使用 core-js 和 zone.js 通常就夠了，不過你也可以查看瀏覽器支持指南以瞭解更多信息。
environments/*
這個文件夾中包括爲各個目標環境準備的文件，它們導出了一些應用中要用到的配置變量。 這些文件會在構建應用時被替換。 比如你可能在產品環境中使用不同的 API 端點地址，或使用不同的統計 Token 參數。 甚至使用一些模擬服務。 所有這些，CLI 都替你考慮到了。
對其中一些文件的詳細描述
package.json
概述
package.json是npm創建的並且是需要使用npm引入依賴包的時候的配置文件。
每個項目的根目錄下面，一般都有一個package.json文件，定義了這個項目所需要的各種模塊，以及項目的配置信息（比如名稱、版本、許可證等元數據）。npm install命令根據這個配置文件，自動下載所需的模塊，也就是配置項目所需的運行和開發環境。
最基本的package.json文件
{
"name" : "xxx",
"version" : "0.0.0",
}
package.json文件中各個字段的說明
1、scripts字段
scripts指定了運行腳本命令的npm命令行縮寫，比如start指定了運行npm run start時，所要執行的命令。
2、dependencies字段，devDependencies字段dependencies字段指定了項目運行所依賴的模塊，
devDependencies指定項目開發所需要的模塊。
它們都指向一個對象。該對象的各個成員，分別由模塊名和對應的版本要求組成，表示依賴的模塊及其版本範圍。
3、peerDependencies
有時，你的項目和所依賴的模塊，都會同時依賴另一個模塊，但是所依賴的版本不一樣。比如，你的項目依賴A模塊和B模塊的1.0版，而A模塊本身又依賴B模塊的2.0版。
大多數情況下，這不構成問題，B模塊的兩個版本可以並存，同時運行。但是，有一種情況，會出現問題，就是這種依賴關係將暴露給用戶。
最典型的場景就是插件，比如A模塊是B模塊的插件。用戶安裝的B模塊是1.0版本，但是A插件只能和2.0版本的B模塊一起使用。這時，用戶要是將1.0版本的B的實例傳給A，就會出現問題。因此，需要一種機制，在模板安裝的時候提醒用戶，如果A和B一起安裝，那麼B必須是2.0模塊。
peerDependencies字段，就是用來供插件指定其所需要的主工具的版本。
4、bin字段
bin項用來指定各個內部命令對應的可執行文件的位置。
5、main字段
main字段指定了加載的入口文件，require('moduleName')就會加載這個文件。這個字段的默認值是模塊根目錄下面的index.js。
6、config 字段
config字段用於添加命令行的環境變量。
7、browser字段
browser指定該模板供瀏覽器使用的版本。Browserify這樣的瀏覽器打包工具，通過它就知道該打包那個文件。
8、engines 字段
engines字段指明瞭該模塊運行的平臺，比如 Node 的某個版本或者瀏覽器。
9、man字段man用來指定當前模塊的man文檔的位置。
10、style字段
style指定供瀏覽器使用時，樣式文件所在的位置。樣式文件打包工具parcelify，通過它知道樣式文件的打包位置。
tsconfig.json
tsconfig.json的作用
在項目的根目錄下創建 tsconfig.json 文件。
瀏覽器不能直接執行 TypeScript ，需要用編譯器轉譯成JavaScript，而且編譯器需要進行一些配置。 tsconfig.json 的配置就是指導編譯器如何生成JavaScript文件。
tsconfig.json中各個參數的作用
{
"compilerOptions": {
"declaration": false,
"module": "commonjs", // 組織代碼的方式
"target": "es5", // 編譯目標平臺
"moduleResolution": "node",
"sourceMap": true, // 把ts文件變異成js文件時，是否生成對應的SourceMap文件
"emitDecoratorMetadata": true, // 讓TypeScript支持爲帶有裝飾器的聲明生成元數據
"experimentalDecorators": true, // 是否啓用實驗性裝飾器特性
"noImplicitAny": true,
"lib": ["dom", "es6"],
"suppressImplicitAnyIndexErrors": true
},
"exclude": [
"node_modules",
"dist"
],
"awesomeTypescriptLoaderOptions": {
"forkChecker": true,
"useWebpackText": true
},
"compileOnSave": false,
"buildOnSave": false
}
Polyfills
/*
配置好上述的幾個文件之後呢，我們在項目中的根目錄下創建一個 src 文件夾。
在 src 文件夾的下面新建一個 polyfills.ts 文件。
polyfills.ts 文件裏引入了運行Angular應用時所需的一些標準js。
*/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/typed';
/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
/**
* Zone JS is required by Angular itself.
*/
import 'zone.js/dist/zone';
import 'ts-helpers';
if (process.env.ENV === 'production') {
// Production
} else {
// Development and test
Error['stackTraceLimit'] = Infinity;
require('zone.js/dist/long-stack-trace-zone');
}
作者：前端路上的小兵
鏈接：https://www.jianshu.com/p/176ea79a7101
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯繫作者獲得授權並註明出處。