CSS Typed OM 项目教程
1. 项目的目录结构及介绍
CSS Typed OM 项目的目录结构如下:
css-typed-om/
├── docs/
├── src/
│ ├── api/
│ ├── internal/
│ └── index.js
├── test/
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── package.json
├── README.md
└── tsconfig.json
- docs/: 包含项目的文档文件。
- src/: 包含项目的源代码文件。
- api/: 包含项目的API相关文件。
- internal/: 包含项目的内部实现文件。
- index.js: 项目的入口文件。
- test/: 包含项目的测试文件。
- .gitignore: 指定Git版本控制系统忽略的文件和目录。
- .npmignore: 指定npm发布时忽略的文件和目录。
- .travis.yml: Travis CI 配置文件。
- LICENSE: 项目的许可证文件。
- package.json: 项目的npm配置文件,包含依赖、脚本等信息。
- README.md: 项目的说明文档。
- tsconfig.json: TypeScript 配置文件。
2. 项目的启动文件介绍
项目的启动文件是 src/index.js
。这个文件是整个项目的入口点,负责初始化并导出项目的核心功能。
// src/index.js
import { CSSStyleValue, StylePropertyMap } from './api/CSSStyleValue';
import { CSSKeywordValue } from './api/CSSKeywordValue';
import { CSSUnitValue } from './api/CSSUnitValue';
import { CSSMathSum } from './api/CSSMathSum';
import { CSSMathProduct } from './api/CSSMathProduct';
import { CSSMathMin } from './api/CSSMathMin';
import { CSSMathMax } from './api/CSSMathMax';
import { CSSMathValue } from './api/CSSMathValue';
import { CSSNumericValue } from './api/CSSNumericValue';
import { CSSNumericArray } from './api/CSSNumericArray';
import { CSSUnparsedValue } from './api/CSSUnparsedValue';
import { CSSVariableReferenceValue } from './api/CSSVariableReferenceValue';
import { CSSTransformValue } from './api/CSSTransformValue';
import { CSSTransformComponent } from './api/CSSTransformComponent';
import { CSSTranslate } from './api/CSSTranslate';
import { CSSRotate } from './api/CSSRotate';
import { CSSScale } from './api/CSSScale';
import { CSSSkew } from './api/CSSSkew';
import { CSSSkewX } from './api/CSSSkewX';
import { CSSSkewY } from './api/CSSSkewY';
import { CSSPerspective } from './api/CSSPerspective';
import { CSSMatrixComponent } from './api/CSSMatrixComponent';
import { CSSPositionValue } from './api/CSSPositionValue';
import { CSSImageValue } from './api/CSSImageValue';
import { CSSResourceValue } from './api/CSSResourceValue';
import { CSSStyleSheet } from './api/CSSStyleSheet';
import { StylePropertyMapReadOnly } from './api/StylePropertyMapReadOnly';
import { StylePropertyMap } from './api/StylePropertyMap';
import { CSSStyleRule } from './api/CSSStyleRule';
import { CSSConditionRule } from './api/CSSConditionRule';
import { CSSGroupingRule } from './api/CSSGroupingRule';
import { CSSMediaRule } from './api/CSSMediaRule';
import { CSSSupportsRule } from './api/CSSSupportsRule';
import { CSSKeyframesRule } from './api/CSSKeyframesRule';
import { CSSKeyframeRule } from './api/CSSKeyframeRule';
import { CSSFontFaceRule } from './api/CSSFontFaceRule';
import { CSSImportRule } from './api/CSSImportRule';
import { CSSPageRule } from './api/CSSPageRule';
import { CSSNamespaceRule } from './api/CSSNamespaceRule';
import { CSSCounterStyleRule } from './api/CSSCounterStyleRule';
import { CSSDocumentRule } from './api/CSSDocumentRule';
import { CSSViewportRule } from './api/CSSViewportRule';
import { CSSFontFeatureValuesRule } from './api/CSSFontFeatureValuesRule';