SimpleBar 开源项目教程

SimpleBar 开源项目教程

simplebarCustom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.项目地址:https://gitcode.com/gh_mirrors/si/simplebar

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

SimpleBar 项目的目录结构如下：

simplebar/
├── dist/
│   ├── simplebar.css
│   ├── simplebar.js
│   ├── simplebar.min.css
│   ├── simplebar.min.js
│   ├── simplebar-core.js
│   ├── simplebar-core.min.js
│   ├── simplebar-react.js
│   ├── simplebar-react.min.js
│   ├── simplebar-vue.js
│   └── simplebar-vue.min.js
├── src/
│   ├── simplebar.js
│   ├── simplebar-core.js
│   ├── simplebar-react.js
│   ├── simplebar-vue.js
│   ├── simplebar.css
│   └── index.js
├── package.json
├── README.md
└── ...

目录结构介绍

• dist/：包含编译后的文件，如 simplebar.min.js 和 simplebar.min.css，这些文件可以直接用于生产环境。
• src/：包含源代码文件，如 simplebar.js 和 simplebar.css，这些文件用于开发和调试。
• package.json：项目的配置文件，包含依赖项、脚本和其他元数据。
• README.md：项目的说明文档，包含项目的基本信息、安装和使用方法。

2、项目的启动文件介绍

SimpleBar 项目的启动文件主要是 src/index.js，它负责导出项目的核心功能和各个框架的适配器。

// src/index.js
export { default } from './simplebar';
export { default as SimpleBarCore } from './simplebar-core';
export { default as SimpleBarReact } from './simplebar-react';
export { default as SimpleBarVue } from './simplebar-vue';

启动文件介绍

• simplebar.js：核心功能文件，包含自定义滚动条的主要逻辑。
• simplebar-core.js：核心功能的简化版本，适用于不需要框架支持的场景。
• simplebar-react.js：React 框架的适配器，使得 SimpleBar 可以在 React 项目中使用。
• simplebar-vue.js：Vue 框架的适配器，使得 SimpleBar 可以在 Vue 项目中使用。

3、项目的配置文件介绍

SimpleBar 项目的配置文件是 package.json，它包含了项目的依赖项、脚本和其他元数据。

{
  "name": "simplebar",
  "version": "6.0.0",
  "description": "Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.",
  "main": "dist/simplebar.js",
  "module": "dist/simplebar.esm.js",
  "scripts": {
    "build": "rollup -c",
    "watch": "rollup -c -w",
    "test": "jest",
    "lint": "eslint src",
    "prepublishOnly": "npm run build"
  },
  "dependencies": {
    "core-js": "^3.6.5"
  },
  "devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "eslint": "^7.9.0",
    "jest": "^26.4.2",
    "rollup": "^2.28.2",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-terser": "^7.0.2"
  },
  "keywords": [
    "scroll",
    "scrollbar",
    "custom",
    "css",
    "javascript",
    "vanilla",
    "cross-browser",
    "independent"
  ],
  "author": "Adrien Grsmto from a fork by Jonathan Nicol",
  "license": "MIT",
  "repository": {
    "type": "git",

simplebarCustom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.项目地址:https://gitcode.com/gh_mirrors/si/simplebar