Flatted 项目教程

1. 项目目录结构及介绍

Flatted 是一个轻量级的 JSON 解析器，支持循环引用。以下是 Flatted 项目的目录结构及其介绍：

flatted/
├── .github/
│   └── workflows/
│       └── ci.yml
├── dist/
│   ├── flatted.esm.js
│   ├── flatted.js
│   └── flatted.min.js
├── src/
│   ├── index.js
│   └── utils.js
├── test/
│   ├── circular.js
│   ├── circular.min.js
│   ├── circular.mjs
│   ├── circular.umd.js
│   └── index.js
├── .babelrc
├── .eslintrc.json
├── .gitignore
├── .npmignore
├── LICENSE
├── package.json
├── README.md
└── rollup.config.js

目录结构说明

• .github/workflows/: 包含 GitHub Actions 的工作流配置文件，用于持续集成和自动化测试。
• dist/: 包含构建后的文件，包括 ESM、UMD 和压缩版本。
• src/: 项目的源代码目录，包含主要的 JavaScript 文件。
• test/: 包含项目的测试文件，用于确保代码的正确性。
• .babelrc: Babel 配置文件，用于转换 ES6+ 代码。
• .eslintrc.json: ESLint 配置文件，用于代码风格检查。
• .gitignore: Git 忽略文件，指定不需要版本控制的文件和目录。
• .npmignore: npm 忽略文件，指定不需要发布到 npm 的文件和目录。
• LICENSE: 项目的开源许可证文件。
• package.json: 项目的 npm 配置文件，包含项目的依赖、脚本等信息。
• README.md: 项目的说明文档，包含项目的介绍、安装和使用方法。
• rollup.config.js: Rollup 配置文件，用于打包项目的 JavaScript 文件。

2. 项目的启动文件介绍

Flatted 项目的启动文件是 src/index.js。这个文件是项目的入口点，定义了主要的 API 接口。

src/index.js 文件内容

import { stringify, parse } from './utils.js';

export { stringify, parse };

文件说明

• stringify: 用于将 JavaScript 对象序列化为 JSON 字符串，支持循环引用。
• parse: 用于将 JSON 字符串解析为 JavaScript 对象，支持循环引用。

3. 项目的配置文件介绍

.babelrc

{
  "presets": ["@babel/preset-env"]
}

配置说明

• @babel/preset-env: 这是一个 Babel 预设，用于将 ES6+ 代码转换为向后兼容的 JavaScript 代码。

.eslintrc.json

{
  "extends": "eslint:recommended",
  "env": {
    "node": true,
    "es6": true
  },
  "parserOptions": {
    "ecmaVersion": 2018
  },
  "rules": {
    "no-console": "off"
  }
}

配置说明

• extends: 继承 ESLint 推荐的规则集。
• env: 指定环境，这里启用了 Node.js 和 ES6 环境。
• parserOptions: 指定 ECMAScript 版本为 2018。
• rules: 自定义规则，这里关闭了 no-console 规则，允许使用 console。

rollup.config.js

import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/flatted.js',
      format: 'umd',
      name: 'flatted'
    },
    {
      file: 'dist/flatted.min.js',
      format: 'umd',
      name: 'flatted',
      plugins: [terser()]
    },
    {
      file: 'dist/flatted.esm.js',
      format: 'esm'
    }
  ]
};

配置说明

• input: 指定入口文件为 src/index.js。
• output: 指定输出配置，包括 UMD、UMD 压缩版和 ESM 格式。
• plugins: 使用 rollup-plugin-terser 插件对 UMD 压缩版进行代码压缩。

通过以上配置，Flatted 项目可以生成适用于不同环境的 JavaScript 文件，方便在各种项目中使用。