使用 Webpack 模块化加载 fullPage.js完整构建流程与源码级解析【免费下载链接】fullPage.jsfullPage plugin by Alvaro Trigo. Create full screen pages fast and simple项目地址: https://gitcode.com/gh_mirrors/fu/fullPage.js导读fullPage.js 是 Alvaro Trigo 开发的经典全屏滚动插件本指南以仓库中的 webpack-example 示例为核心系统讲解如何在 Webpack 工程化环境中安装、构建并导入 fullPage.js最终初始化全屏滚动实例。读完本文你将掌握完整的npm install→npm run build构建链路、import fullpage from fullpage.js的模块导入规范、扩展extensions与 scrollOverflow 的可选导入方式以及从源码视角理解实例初始化与公开 APIfullpage_api的底层原理。一、示例工程结构与准备webpack 示例位于 examples/module_loaders/webpack-example 目录包含四个关键文件文件作用package.json声明fullpage.js依赖与build构建脚本webpack.config.jsWebpack 打包配置入口、输出与 sourcemapsrc/index.js业务源码导入 fullpage.js 并初始化README.md使用说明文档从 package.json 可以看到示例依赖fullpage.js^4.0.21并声明了webpack^4.19.1与webpack-cli^3.1.1作为 devDependencies。仓库根目录的 package.json 中fullPage.js 主模块版本为4.0.41main字段指向dist/fullpage.js因此通过 npm 安装后可直接以模块名导入。二、安装依赖npm install进入examples/module_loaders/webpack-example目录后第一步是安装项目依赖npm install该命令会依据 package.json 同时安装运行期依赖fullpage.js与构建期依赖webpack、webpack-cli。由于 fullPage.js 以 npm 包形式分发构建产物会被拉取到本地node_modules为后续模块导入提供来源。三、构建打包从 npm run build 到 npx webpack安装完成后在示例根目录执行npm run build根据 README 说明该命令实际执行的是 package.json 中scripts.build字段定义的内容npx webpack --config webpack.config.js3.1 示例中的真实构建命令对照源码示例 package.json 中实际的 build 脚本比 README 更完整export SET NODE_OPTIONS--openssl-legacy-provider npx webpack --mode development --config webpack.config.js这里有两处值得注意的细节--openssl-legacy-provider这是针对较新版本 Node.js如 Node 17的兼容措施。新版本 Node 默认启用了 OpenSSL 3.0 提供方而 webpack 4 依赖的旧哈希算法会报错通过该选项回退到 legacy 提供方解决。如果你在构建时遇到error:0308010C:digital envelope routines::unsupported原因即在此。--mode development显式指定开发模式与 webpack.config.js 中devtool: inline-source-map配合便于开发调试。3.2 webpack.config.js 逐项解析webpack.config.js 内容如下var webpack require(webpack); const path require(path); var PROD JSON.parse(process.env.PROD_ENV || 0); module.exports { entry: ./src/index.js, output: { filename: main.js, path: path.resolve(__dirname, dist) }, devtool: inline-source-map };entry: ./src/index.js以src/index.js为打包入口即包含 fullPage.js 导入与初始化的业务文件output.filename: main.js打包后生成名为main.js的 bundle 文件README 中反复提到的创建 bundle 文件main.js即指此处output.path产物输出到示例目录下的dist/文件夹devtool: inline-source-map以内联 sourcemap 提供源码级调试能力PROD变量通过环境变量PROD_ENV预留了生产/开发切换的扩展点示例中未实际使用但体现了配置的扩展思路。构建完成后在 HTML 页面中通过script srcdist/main.js/script引入即可无需再手动加载 fullPage.js 的独立脚本文件——这正是模块化打包的核心价值所有依赖被统一打包进main.js页面只关心一个 bundle。四、模块化导入 fullPage.jssrc/index.js 展示了完整的导入模式// Optional. When using fullPage extensions //import scrollHorizontally from ./fullpage.scrollHorizontally.min; // Optional. When using scrollOverflow:true //import IScroll from fullpage.js/vendors/scrolloverflow; // Importing fullpage.js import fullpage from fullpage.js; // When using fullPage extensions replace the previous import // of fullpage.js for this file //import fullpage from fullpage.js/dist/fullpage.extensions.min; // Initializing it var fullPageInstance new fullpage(#myFullpage, { navigation: true, sectionsColor:[#ff5f45, #0798ec, #fc6c7c, grey] });4.1 标准导入方式import fullpage from fullpage.js是核心导入语句。fullPage.js v4 的入口文件 src/js/fullpage.js 通过export default function fullpage(containerSelector, options)导出一个构造工厂函数因此导入后可直接new fullpage(...)调用。4.2 三组可选导入注释详解示例中保留了三条被注释的可选导入路径对应三种进阶使用场景fullPage 扩展导入//import fullpage from fullpage.js/dist/fullpage.extensions.min;—— 当使用 fullPage.js 商业扩展如 scrollHorizontally、parallax 等时需用扩展合并版替代标准导入。从仓库根目录 package.json 的files字段可见dist/fullpage.extensions.min.js确实随包分发而dist/目录中也真实存在 fullpage.extensions.min.js 文件scrollHorizontally 扩展导入//import scrollHorizontally from ./fullpage.scrollHorizontally.min;—— 单独引入横向滚动扩展时使用scrollOverflow 依赖导入//import IScroll from fullpage.js/vendors/scrolloverflow;—— 当启用scrollOverflow: true内容超出视口时在 section 内部滚动时需要引入 IScroll 相关的 scrolloverflow 模块。仓库中 vendors 目录也包含 easings.js 等配套依赖印证了 vendored 资源的组织方式。4.3 初始化实例var fullPageInstance new fullpage(#myFullpage, { navigation: true, sectionsColor:[#ff5f45, #0798ec, #fc6c7c, grey] });第一个参数#myFullpage是容器选择器对应页面中包裹各div classsection的父容器navigation: true启用右侧圆点导航sectionsColor为每个 section 依次指定背景色#ff5f45红、#0798ec蓝、#fc6c7c粉、grey灰数组长度与 section 数量对应。从源码看fullpage.js 构造函数内部会依次执行setCache()、setOptions(options)合并用户配置与默认配置、setContainer(...)随后通过EventEmitter.emit(events.onInitialise)派发初始化事件再调用init()完成 DOM 预处理与滚动绑定最后setState({isFullpageInitDone: true})标记初始化完成。4.4 调用 fullPage.js 方法示例源码末尾还演示了实例化之后的方法调用方式// Calling methods // fullpage_api.moveSectionDown(); // Or // fullPageInstance.moveSectionDown();fullpage_api是 fullPage.js 暴露在window上的全局 API 对象。在 src/js/fullpage.js 的setAPI()函数末尾源码执行win.fullpage_api FP;将公共方法挂载到全局因此无需保存实例也能通过fullpage_api.moveSectionDown()等全局 API 驱动滚动fullPageInstance则是构造函数返回值——同一段源码显示构造函数return win.fullpage_api;所以两种调用方式实际指向同一 API 对象效果等价。除此之外fullPage.js 还提供了moveSectionUp()、moveTo(section, slide)、setAllowScrolling()等公开方法详见 src/js/scroll 目录下的 moveSectionDown.js、moveSectionUp.js、moveTo.js 等实现配合callbacks、stateUpdates等模块可构建完整的交互逻辑。五、与其他模块加载器的对比fullPage.js 官方在 README.md 中明确提示使用 Webpack、Browserify 或 Require.js 的开发者应参考模块加载器专项文档。本仓库在examples/module_loaders下提供了三套平行示例示例目录加载器构建方式webpack-exampleWebpack 4npx webpack --config webpack.config.jsbrowserify-exampleBrowserifybrowserify src/index.js dist/main.jsrequirejs-exampleRequire.jsAMD 运行时加载见 src/main.js 与 require.config.js三者的核心差异在于Webpack/Browserify 属于构建期打包产出单文件 bundleRequire.js 属于运行期 AMD 模块加载。但无论哪种方式导入的模块路径与初始化写法new fullpage(selector, options)保持一致这得益于 fullPage.js v4 标准的 ESM/UMD 导出设计。六、常见问题与注意事项Node 版本兼容webpack 4 新版 Node 构建报 OpenSSL 错误时参照示例 build 脚本加入--openssl-legacy-provider扩展为付费功能fullpage.extensions.min.js对应的扩展如 scrollHorizontally、parallax、scrollOverflow 的进阶能力属于商业授权功能需按官方渠道获取产物位置构建产物固定输出到示例的dist/main.js页面引入时路径需与此对应容器选择器#myFullpage必须与 HTML 中实际容器 id 一致且容器内 section 需使用默认的.section类可查阅 src/js/common/selectors.js 确认默认选择器否则初始化后无法正确识别滚动区块。七、小结通过本指南你已完整掌握 fullPage.js 在 Webpack 环境下的落地路径npm install安装依赖 →npm run build触发npx webpack打包 →import fullpage from fullpage.js模块化导入 →new fullpage(selector, options)初始化全屏滚动。同时从 src/js/fullpage.js 源码层面理解了window.fullpage_api的暴露机制与实例初始化的内部流程。这套模式同样可迁移到 Browserify、Require.js 等其他模块化工程是 fullPage.js 在现代前端工程中集成的最佳起点。【免费下载链接】fullPage.jsfullPage plugin by Alvaro Trigo. Create full screen pages fast and simple项目地址: https://gitcode.com/gh_mirrors/fu/fullPage.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 使用 Webpack 模块化加载 fullPage.js：完整构建流程与源码级解析
使用 Webpack 模块化加载 fullPage.js完整构建流程与源码级解析【免费下载链接】fullPage.jsfullPage plugin by Alvaro Trigo. Create full screen pages fast and simple项目地址: https://gitcode.com/gh_mirrors/fu/fullPage.js导读fullPage.js 是 Alvaro Trigo 开发的经典全屏滚动插件本指南以仓库中的 webpack-example 示例为核心系统讲解如何在 Webpack 工程化环境中安装、构建并导入 fullPage.js最终初始化全屏滚动实例。读完本文你将掌握完整的npm install→npm run build构建链路、import fullpage from fullpage.js的模块导入规范、扩展extensions与 scrollOverflow 的可选导入方式以及从源码视角理解实例初始化与公开 APIfullpage_api的底层原理。一、示例工程结构与准备webpack 示例位于 examples/module_loaders/webpack-example 目录包含四个关键文件文件作用package.json声明fullpage.js依赖与build构建脚本webpack.config.jsWebpack 打包配置入口、输出与 sourcemapsrc/index.js业务源码导入 fullpage.js 并初始化README.md使用说明文档从 package.json 可以看到示例依赖fullpage.js^4.0.21并声明了webpack^4.19.1与webpack-cli^3.1.1作为 devDependencies。仓库根目录的 package.json 中fullPage.js 主模块版本为4.0.41main字段指向dist/fullpage.js因此通过 npm 安装后可直接以模块名导入。二、安装依赖npm install进入examples/module_loaders/webpack-example目录后第一步是安装项目依赖npm install该命令会依据 package.json 同时安装运行期依赖fullpage.js与构建期依赖webpack、webpack-cli。由于 fullPage.js 以 npm 包形式分发构建产物会被拉取到本地node_modules为后续模块导入提供来源。三、构建打包从 npm run build 到 npx webpack安装完成后在示例根目录执行npm run build根据 README 说明该命令实际执行的是 package.json 中scripts.build字段定义的内容npx webpack --config webpack.config.js3.1 示例中的真实构建命令对照源码示例 package.json 中实际的 build 脚本比 README 更完整export SET NODE_OPTIONS--openssl-legacy-provider npx webpack --mode development --config webpack.config.js这里有两处值得注意的细节--openssl-legacy-provider这是针对较新版本 Node.js如 Node 17的兼容措施。新版本 Node 默认启用了 OpenSSL 3.0 提供方而 webpack 4 依赖的旧哈希算法会报错通过该选项回退到 legacy 提供方解决。如果你在构建时遇到error:0308010C:digital envelope routines::unsupported原因即在此。--mode development显式指定开发模式与 webpack.config.js 中devtool: inline-source-map配合便于开发调试。3.2 webpack.config.js 逐项解析webpack.config.js 内容如下var webpack require(webpack); const path require(path); var PROD JSON.parse(process.env.PROD_ENV || 0); module.exports { entry: ./src/index.js, output: { filename: main.js, path: path.resolve(__dirname, dist) }, devtool: inline-source-map };entry: ./src/index.js以src/index.js为打包入口即包含 fullPage.js 导入与初始化的业务文件output.filename: main.js打包后生成名为main.js的 bundle 文件README 中反复提到的创建 bundle 文件main.js即指此处output.path产物输出到示例目录下的dist/文件夹devtool: inline-source-map以内联 sourcemap 提供源码级调试能力PROD变量通过环境变量PROD_ENV预留了生产/开发切换的扩展点示例中未实际使用但体现了配置的扩展思路。构建完成后在 HTML 页面中通过script srcdist/main.js/script引入即可无需再手动加载 fullPage.js 的独立脚本文件——这正是模块化打包的核心价值所有依赖被统一打包进main.js页面只关心一个 bundle。四、模块化导入 fullPage.jssrc/index.js 展示了完整的导入模式// Optional. When using fullPage extensions //import scrollHorizontally from ./fullpage.scrollHorizontally.min; // Optional. When using scrollOverflow:true //import IScroll from fullpage.js/vendors/scrolloverflow; // Importing fullpage.js import fullpage from fullpage.js; // When using fullPage extensions replace the previous import // of fullpage.js for this file //import fullpage from fullpage.js/dist/fullpage.extensions.min; // Initializing it var fullPageInstance new fullpage(#myFullpage, { navigation: true, sectionsColor:[#ff5f45, #0798ec, #fc6c7c, grey] });4.1 标准导入方式import fullpage from fullpage.js是核心导入语句。fullPage.js v4 的入口文件 src/js/fullpage.js 通过export default function fullpage(containerSelector, options)导出一个构造工厂函数因此导入后可直接new fullpage(...)调用。4.2 三组可选导入注释详解示例中保留了三条被注释的可选导入路径对应三种进阶使用场景fullPage 扩展导入//import fullpage from fullpage.js/dist/fullpage.extensions.min;—— 当使用 fullPage.js 商业扩展如 scrollHorizontally、parallax 等时需用扩展合并版替代标准导入。从仓库根目录 package.json 的files字段可见dist/fullpage.extensions.min.js确实随包分发而dist/目录中也真实存在 fullpage.extensions.min.js 文件scrollHorizontally 扩展导入//import scrollHorizontally from ./fullpage.scrollHorizontally.min;—— 单独引入横向滚动扩展时使用scrollOverflow 依赖导入//import IScroll from fullpage.js/vendors/scrolloverflow;—— 当启用scrollOverflow: true内容超出视口时在 section 内部滚动时需要引入 IScroll 相关的 scrolloverflow 模块。仓库中 vendors 目录也包含 easings.js 等配套依赖印证了 vendored 资源的组织方式。4.3 初始化实例var fullPageInstance new fullpage(#myFullpage, { navigation: true, sectionsColor:[#ff5f45, #0798ec, #fc6c7c, grey] });第一个参数#myFullpage是容器选择器对应页面中包裹各div classsection的父容器navigation: true启用右侧圆点导航sectionsColor为每个 section 依次指定背景色#ff5f45红、#0798ec蓝、#fc6c7c粉、grey灰数组长度与 section 数量对应。从源码看fullpage.js 构造函数内部会依次执行setCache()、setOptions(options)合并用户配置与默认配置、setContainer(...)随后通过EventEmitter.emit(events.onInitialise)派发初始化事件再调用init()完成 DOM 预处理与滚动绑定最后setState({isFullpageInitDone: true})标记初始化完成。4.4 调用 fullPage.js 方法示例源码末尾还演示了实例化之后的方法调用方式// Calling methods // fullpage_api.moveSectionDown(); // Or // fullPageInstance.moveSectionDown();fullpage_api是 fullPage.js 暴露在window上的全局 API 对象。在 src/js/fullpage.js 的setAPI()函数末尾源码执行win.fullpage_api FP;将公共方法挂载到全局因此无需保存实例也能通过fullpage_api.moveSectionDown()等全局 API 驱动滚动fullPageInstance则是构造函数返回值——同一段源码显示构造函数return win.fullpage_api;所以两种调用方式实际指向同一 API 对象效果等价。除此之外fullPage.js 还提供了moveSectionUp()、moveTo(section, slide)、setAllowScrolling()等公开方法详见 src/js/scroll 目录下的 moveSectionDown.js、moveSectionUp.js、moveTo.js 等实现配合callbacks、stateUpdates等模块可构建完整的交互逻辑。五、与其他模块加载器的对比fullPage.js 官方在 README.md 中明确提示使用 Webpack、Browserify 或 Require.js 的开发者应参考模块加载器专项文档。本仓库在examples/module_loaders下提供了三套平行示例示例目录加载器构建方式webpack-exampleWebpack 4npx webpack --config webpack.config.jsbrowserify-exampleBrowserifybrowserify src/index.js dist/main.jsrequirejs-exampleRequire.jsAMD 运行时加载见 src/main.js 与 require.config.js三者的核心差异在于Webpack/Browserify 属于构建期打包产出单文件 bundleRequire.js 属于运行期 AMD 模块加载。但无论哪种方式导入的模块路径与初始化写法new fullpage(selector, options)保持一致这得益于 fullPage.js v4 标准的 ESM/UMD 导出设计。六、常见问题与注意事项Node 版本兼容webpack 4 新版 Node 构建报 OpenSSL 错误时参照示例 build 脚本加入--openssl-legacy-provider扩展为付费功能fullpage.extensions.min.js对应的扩展如 scrollHorizontally、parallax、scrollOverflow 的进阶能力属于商业授权功能需按官方渠道获取产物位置构建产物固定输出到示例的dist/main.js页面引入时路径需与此对应容器选择器#myFullpage必须与 HTML 中实际容器 id 一致且容器内 section 需使用默认的.section类可查阅 src/js/common/selectors.js 确认默认选择器否则初始化后无法正确识别滚动区块。七、小结通过本指南你已完整掌握 fullPage.js 在 Webpack 环境下的落地路径npm install安装依赖 →npm run build触发npx webpack打包 →import fullpage from fullpage.js模块化导入 →new fullpage(selector, options)初始化全屏滚动。同时从 src/js/fullpage.js 源码层面理解了window.fullpage_api的暴露机制与实例初始化的内部流程。这套模式同样可迁移到 Browserify、Require.js 等其他模块化工程是 fullPage.js 在现代前端工程中集成的最佳起点。【免费下载链接】fullPage.jsfullPage plugin by Alvaro Trigo. Create full screen pages fast and simple项目地址: https://gitcode.com/gh_mirrors/fu/fullPage.js创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考