Brackets Autoprefixer 项目教程

1. 项目的目录结构及介绍

brackets-autoprefixer/
├── html/
│   └── ...
├── modules/
│   └── ...
├── nls/
│   └── ...
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .travis.yml
├── CHANGELOG.md
├── LICENSE
├── README.md
├── main.js
└── package.json

目录结构介绍

• html/: 包含项目的HTML文件。
• modules/: 包含项目的模块文件。
• nls/: 包含国际化（i18n）文件。
• .eslintignore: ESLint忽略文件列表。
• .eslintrc: ESLint配置文件。
• .gitignore: Git忽略文件列表。
• .travis.yml: Travis CI配置文件。
• CHANGELOG.md: 项目更新日志。
• LICENSE: 项目许可证文件。
• README.md: 项目介绍和使用说明。
• main.js: 项目的启动文件。
• package.json: 项目的配置文件。

2. 项目的启动文件介绍

main.js

main.js 是 Brackets Autoprefixer 项目的启动文件。它负责初始化扩展并处理 CSS 文件的自动前缀添加。以下是 main.js 的主要功能：

• 初始化扩展: 在 Brackets 启动时加载并初始化 Autoprefixer 扩展。
• 自动前缀处理: 根据配置自动为 CSS 文件添加或删除浏览器前缀。
• 事件监听: 监听文件保存事件，自动处理前缀添加。

3. 项目的配置文件介绍

package.json

package.json 是 Brackets Autoprefixer 项目的配置文件，包含了项目的基本信息、依赖项和其他配置。以下是 package.json 的主要内容：

{
  "name": "brackets-autoprefixer",
  "version": "1.0.0",
  "description": "Brackets/Edge Code extension that parses CSS documents and add vendor prefixes automatically.",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "mikaeljorhult",
  "license": "MIT",
  "dependencies": {
    "autoprefixer": "^10.0.0"
  }
}

配置文件介绍

• name: 项目名称。
• version: 项目版本号。
• description: 项目描述。
• main: 项目的启动文件路径。
• scripts: 项目脚本，如测试脚本。
• author: 项目作者。
• license: 项目许可证。
• dependencies: 项目依赖项，如 autoprefixer。

通过以上配置，package.json 确保了项目的正确运行和依赖管理。