AMP HTML 项目使用教程

1. 项目目录结构及介绍

AMP HTML 项目的目录结构如下：

amphtml/
├── ads/
├── build-system/
├── css/
├── docs/
├── examples/
├── extensions/
├── src/
├── test/
├── testing/
├── third_party/
├── tools/experiments/
├── validator/
├── .editorconfig
├── .eslint-plugin-local.js
├── .eslintignore
├── .eslintrc.js
├── .gitattributes
├── .gitignore
├── .lando.yml
├── .lgtm.yml
├── .npmrc
├── .prettierignore
├── .prettierrc
├── .renovaterc.json
├── CODE_OF_CONDUCT.md
├── LICENSE
├── OWNERS
├── README.md
├── SECURITY.md
├── amp.js
├── babel.config.js
├── codecov.yml
├── package-lock.json
├── package-scripts.js
├── package.json
├── tsconfig.base.json
└── tsconfig.json

目录介绍

• ads/: 包含与广告相关的代码和资源。
• build-system/: 包含项目的构建系统配置和脚本。
• css/: 包含项目的样式文件。
• docs/: 包含项目的文档文件。
• examples/: 包含项目的示例代码。
• extensions/: 包含项目的扩展模块。
• src/: 包含项目的主要源代码。
• test/: 包含项目的测试代码。
• testing/: 包含项目的测试工具和配置。
• third_party/: 包含第三方依赖库。
• tools/experiments/: 包含实验性工具和配置。
• validator/: 包含验证器相关的代码。

2. 项目启动文件介绍

项目的启动文件主要是 amp.js，它位于项目的根目录下。这个文件是 AMP HTML 框架的核心入口文件，负责初始化和加载 AMP 组件。

3. 项目配置文件介绍

3.1 package.json

package.json 是 Node.js 项目的配置文件，包含了项目的元数据、依赖库、脚本等信息。

{
  "name": "amphtml",
  "version": "1.0.0",
  "description": "The AMP web component framework",
  "main": "amp.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "Apache-2.0",
  "dependencies": {
    "babel": "^7.0.0",
    "eslint": "^8.0.0",
    "prettier": "^2.0.0"
  }
}

3.2 babel.config.js

babel.config.js 是 Babel 的配置文件，用于配置 JavaScript 的编译和转换。

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: ['@babel/plugin-proposal-class-properties']
};

3.3 tsconfig.json

tsconfig.json 是 TypeScript 的配置文件，用于配置 TypeScript 编译器的行为。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  }
}

3.4 .eslintrc.js

.eslintrc.js 是 ESLint 的配置文件，用于配置代码风格检查和错误检测。

module.exports = {
  extends: 'eslint:recommended',
  rules: {
    'no-console': 'warn'
  }
};

3.5 .prettierrc

.prettierrc 是 Prettier 的配置文件，用于配置代码格式化规则。

{
  "singleQuote": true,
  "trailingComma": "all"
}

通过以上配置文件，开发者可以自定义项目的构建、编译、代码风格检查等行为，确保项目的一致性和可维护性。