BetterScroll 项目安装指南：多种方式快速上手

前言

BetterScroll 是一个强大的移动端滚动解决方案，广泛应用于各类需要实现平滑滚动效果的 Web 项目中。本文将详细介绍 BetterScroll 的多种安装方式，帮助开发者根据项目需求选择最适合的安装方法。

核心包安装（推荐）

对于大多数现代前端项目，我们推荐使用核心包安装方式，这种方式更加轻量且灵活。

使用 NPM/Yarn 安装

通过包管理器安装核心包是最推荐的方式：

npm install @better-scroll/core --save
# 或者使用 Yarn
yarn add @better-scroll/core

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

import BScroll from '@better-scroll/core'

对于 CommonJS 规范的项目：

var BScroll = require('@better-scroll/core')

优势分析

1. 按需引入：只安装核心功能，减少包体积
2. 模块化：与现代前端构建工具完美配合
3. 版本管理：便于依赖管理和版本控制

传统脚本引入方式

对于不使用构建工具的传统项目，可以通过 script 标签直接引入 BetterScroll。

CDN 引入

在 HTML 文件中添加以下 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>

引入后，全局会暴露 BScroll 对象，使用方式如下：

let wrapper = document.getElementById("wrapper")
let bs = new BScroll(wrapper, {})

适用场景

1. 快速原型开发
2. 传统多页面应用
3. 不需要构建工具的小型项目

完整功能版安装

如果需要使用 BetterScroll 的所有插件功能，可以安装完整版本。

完整包安装

npm install better-scroll --save
# 或者使用 Yarn
yarn add better-scroll

引入方式：

import BetterScroll from 'better-scroll'
let 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>

使用方式略有不同：

let bs = BetterScroll.createBScroll('.wrapper', {})

完整版特点

1. 包含所有官方插件
2. 开箱即用，无需额外配置
3. 适合需要多种功能的复杂项目

版本选择建议

1. 新项目：推荐使用核心包 + 按需引入插件的方式
2. 已有项目：根据现有架构选择适合的引入方式
3. 简单需求：传统 script 引入更快捷
4. 复杂需求：完整版提供更多功能

常见问题

1. 版本冲突：确保项目中只使用一种引入方式
2. 构建工具兼容：现代构建工具都支持上述安装方式
3. TypeScript 支持：所有方式都提供完整的类型定义

结语

BetterScroll 提供了灵活的安装方式以适应不同开发场景。理解每种方式的优缺点，可以帮助开发者做出更合理的选择。建议新项目优先考虑核心包安装方式，既能保持轻量又便于后续扩展。