Better-Scroll 项目安装指南：从基础到进阶

前言

Better-Scroll 是一个强大的移动端滚动解决方案，广泛应用于各类 Web 应用和混合开发项目中。本文将详细介绍如何在不同环境中安装和使用 Better-Scroll，帮助开发者快速上手这一优秀工具。

核心包安装方式

NPM/Yarn 安装（推荐）

对于现代前端项目，我们推荐使用包管理器进行安装：

# 使用 npm 安装核心包
npm install @better-scroll/core --save

# 或使用 yarn 安装
yarn add @better-scroll/core

安装完成后，在项目中可以通过以下方式引入：

// ES6 模块化导入
import BScroll from '@better-scroll/core'

// CommonJS 规范引入
const BScroll = require('@better-scroll/core')

CDN 直接引入

对于简单的项目或快速原型开发，可以直接通过 script 标签引入：

<!-- 开发版本 -->
<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.js"></script>

<!-- 生产环境压缩版本 -->
<script src="https://unpkg.com/@better-scroll/core@latest/dist/core.min.js"></script>

使用方式：

const wrapper = document.getElementById("wrapper")
const bs = new BScroll(wrapper, {
  // 配置项
})

完整版安装方式

Better-Scroll 还提供了包含所有插件的完整版本，适合需要多种功能的项目：

包管理器安装

# npm 安装完整版
npm install better-scroll --save

# yarn 安装完整版
yarn add better-scroll

引入方式：

import BetterScroll from 'better-scroll'
const bs = new BetterScroll('.wrapper', {
  // 配置项
})

CDN 引入完整版

<!-- 开发版本 -->
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.js"></script>

<!-- 生产环境压缩版本 -->
<script src="https://unpkg.com/better-scroll@latest/dist/better-scroll.min.js"></script>

使用方式略有不同：

const bs = BetterScroll.createBScroll('.wrapper', {
  // 配置项
})

版本选择建议

1. 核心版 vs 完整版

   • 核心版：体积小，只包含基础滚动功能
   • 完整版：包含所有插件，适合需要复杂功能的项目

2. 开发环境 vs 生产环境

   • 开发环境：建议使用未压缩版本，便于调试
   • 生产环境：务必使用.min压缩版本，减少加载时间

最佳实践

1. 现代前端项目：推荐使用 npm/yarn 安装核心版，按需引入插件
2. 传统项目：可以使用 CDN 方式引入完整版
3. 性能优化：在移动端项目中，特别注意只加载必要的功能模块

常见问题

Q: 安装后无法正确引入模块？ A: 请检查项目构建配置是否支持 ES6 模块，必要时可配置 Babel 转译

Q: CDN 引入后 BScroll 未定义？ A: 确保脚本已正确加载，检查网络连接和 CDN 地址是否正确

通过以上介绍，相信您已经掌握了 Better-Scroll 的安装方法。接下来可以开始探索其丰富的功能和配置选项，为您的项目添加流畅的滚动体验。