angular项目中各个文件的作用

Posted 2020-11-19 前端路上的小兵

原文地址

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‘);
}