Preact Virtual List 项目教程
1. 项目的目录结构及介绍
Preact Virtual List 项目的目录结构如下:
preact-virtual-list/
├── src/
│ ├── index.js
│ └── ...
├── test/
│ └── ...
├── .editorconfig
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── README.md
├── package.json
└── rollup.config.js
目录介绍
- src/: 包含项目的主要源代码文件。
- test/: 包含项目的测试文件。
- .editorconfig: 配置文件,用于统一代码风格。
- .eslintignore: 指定 ESLint 忽略的文件和目录。
- .eslintrc: ESLint 配置文件。
- .gitignore: 指定 Git 忽略的文件和目录。
- .npmignore: 指定 npm 发布时忽略的文件和目录。
- .travis.yml: Travis CI 配置文件。
- LICENSE: 项目的许可证文件。
- README.md: 项目的说明文档。
- package.json: 项目的 npm 配置文件。
- rollup.config.js: Rollup 打包配置文件。
2. 项目的启动文件介绍
项目的启动文件位于 src/index.js
。这个文件是项目的入口点,负责导出 Virtual List 组件。
// src/index.js
export { default } from './VirtualList';
3. 项目的配置文件介绍
package.json
package.json
文件包含了项目的元数据和依赖信息。以下是一些关键字段:
{
"name": "preact-virtual-list",
"version": "1.0.0",
"description": "A 'virtual' list component that renders only visible rows of a given data set.",
"main": "dist/preact-virtual-list.js",
"module": "dist/preact-virtual-list.mjs",
"scripts": {
"build": "rollup -c",
"test": "jest"
},
"dependencies": {
"preact": "^10.0.0"
},
"devDependencies": {
"rollup": "^2.0.0",
"jest": "^26.0.0"
}
}
rollup.config.js
rollup.config.js
文件用于配置 Rollup 打包工具。以下是配置文件的示例:
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';
export default {
input: 'src/index.js',
output: [
{ file: 'dist/preact-virtual-list.js', format: 'cjs' },
{ file: 'dist/preact-virtual-list.mjs', format: 'es' }
],
plugins: [
resolve(),
commonjs(),
babel({ babelHelpers: 'bundled' })
]
};
这个配置文件指定了输入文件和输出文件的格式,并使用了几个 Rollup 插件来处理模块解析、CommonJS 转换和 Babel 编译。