React Component Resize Observer 使用教程

React Component Resize Observer 使用教程

resize-observer👓 Resize observer for React项目地址:https://gitcode.com/gh_mirrors/res/resize-observer

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

/react-component/resize-observer
├── .github
│   └── FUNDING.yml
├── .gitignore
├── .npmignore
├── .prettierrc
├── CHANGELOG.md
├── LICENSE
├── README.md
├── index.js
├── package.json
├── rollup.config.js
└── src
    ├── ResizeObserver.js
    └── index.js

• .github: 包含GitHub相关的配置文件，如资金支持配置。
• .gitignore: Git忽略文件配置。
• .npmignore: npm忽略文件配置。
• .prettierrc: Prettier代码格式化配置。
• CHANGELOG.md: 项目更新日志。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• index.js: 项目入口文件。
• package.json: 项目依赖和脚本配置。
• rollup.config.js: Rollup打包配置。
• src: 源代码目录。
  • ResizeObserver.js: 核心功能实现文件。
  • index.js: 源代码入口文件。

2. 项目的启动文件介绍

项目的启动文件是 index.js，位于项目根目录下。这个文件是项目的入口点，负责导出项目的主要功能模块。

// index.js
export { default } from './src';

3. 项目的配置文件介绍

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

{
  "name": "@react-component/resize-observer",
  "version": "1.1.3",
  "description": "resize observer component for react",
  "main": "index.js",
  "module": "es/index.js",
  "typings": "lib/index.d.ts",
  "files": [
    "dist",
    "lib",
    "es",
    "src"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/react-component/resize-observer.git"
  },
  "keywords": [
    "react",
    "component",
    "resize",
    "observer"
  ],
  "author": "afc163 <afc163@gmail.com>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/react-component/resize-observer/issues"
  },
  "homepage": "https://github.com/react-component/resize-observer#readme",
  "peerDependencies": {
    "react": "^16.9.0 || ^17.0.0"
  },
  "dependencies": {
    "resize-observer-polyfill": "^1.5.1"
  },
  "devDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

• rollup.config.js: 用于配置Rollup打包工具的文件。

import commonjs from '@rollup/plugin-commonjs';
import nodeResolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import replace from '@rollup/plugin-replace';
import { terser } from 'rollup-plugin-terser';

const env = process.env.NODE_ENV;

export default {
  input: 'src/index.js',
  output: {
    file: env === 'production' ? 'dist/resize-observer.min.js' : 'dist/resize-observer.js',
    format: 'umd',
    name: 'ResizeObserver',
    globals: {
      react: 'React',
      'react-dom': 'ReactDOM'
    }
  },
  external: ['react', 'react-dom'],
  plugins: [
    nodeResolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**',
      babelHelpers: 'bundled'
    }),
    replace({
      'process.env.NODE_ENV': JSON

resize-observer👓 Resize observer for React项目地址:https://gitcode.com/gh_mirrors/res/resize-observer