angular项目中各个文件的作用
原文地址
https://www.jianshu.com/p/176ea79a7101
大纲
1、对angular项目中的一些文件的概述
2、对其中一些文件的详细描述
2.1、package.json
2.2、tsconfig.json
2.3、Polyfills
对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字段指定了运行脚本命令的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字段用来指定各个内部命令对应的可执行文件的位置。
5、main字段指定了加载的入口文件，require('moduleName')就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。
6、config 字段段用于添加命令行的环境变量。
7、browser字段指定该模板供浏览器使用的版本。Browserify这样的浏览器打包工具，通过它就知道该打包那个文件。
8、engines 字段指明了该模块运行的平台，比如 Node 的某个版本或者浏览器。
9、man字段用来指定当前模块的man文档的位置。
10、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');
}
