css-vars-ponyfill 项目教程

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

css-vars-ponyfill 项目的目录结构相对简单，主要包含以下几个部分：

css-vars-ponyfill/
├── demo/
│   ├── index.html
│   ├── style.css
│   ├── css-vars-ponyfill.js
│   └── app.js
├── src/
│   ├── css-vars-ponyfill.js
│   └── utils.js
├── test/
│   ├── index.html
│   └── test.js
├── .gitignore
├── LICENSE
├── package.json
├── README.md
└── webpack.config.js

• demo/: 包含项目的演示文件，如 index.html, style.css, css-vars-ponyfill.js 和 app.js。
• src/: 包含项目的主要源代码文件，如 css-vars-ponyfill.js 和 utils.js。
• test/: 包含项目的测试文件，如 index.html 和 test.js。
• .gitignore: Git 忽略文件配置。
• LICENSE: 项目许可证文件。
• package.json: 项目依赖和脚本配置文件。
• README.md: 项目说明文档。
• webpack.config.js: Webpack 配置文件。

2. 项目的启动文件介绍

项目的启动文件主要位于 demo/ 目录下：

• index.html: 演示页面的 HTML 文件，包含了引入 css-vars-ponyfill.js 和 app.js 的脚本标签。
• style.css: 演示页面的样式文件，使用了 CSS 变量。
• css-vars-ponyfill.js: 核心库文件，提供了对 CSS 变量的兼容性支持。
• app.js: 演示页面的 JavaScript 文件，用于初始化和操作 CSS 变量。

3. 项目的配置文件介绍

项目的配置文件主要包括：

• package.json: 包含了项目的依赖、脚本和其他元数据。例如：

{
  "name": "css-vars-ponyfill",
  "version": "2.4.7",
  "description": "Client-side support for CSS custom properties in legacy and modern browsers",
  "main": "dist/css-vars-ponyfill.cjs.js",
  "module": "dist/css-vars-ponyfill.esm.js",
  "scripts": {
    "build": "rollup -c",
    "test": "karma start"
  },
  "dependencies": {},
  "devDependencies": {
    "rollup": "^2.3.4",
    "karma": "^5.0.4"
  }
}

• webpack.config.js: Webpack 的配置文件，用于构建和打包项目。例如：

const path = require('path');

module.exports = {
  entry: './src/css-vars-ponyfill.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'css-vars-ponyfill.min.js',
    library: 'cssVars',
    libraryTarget: 'umd'
  },
  mode: 'production'
};

通过这些配置文件，可以方便地管理和构建项目。