Project Configuration Files

If you are contributing to ScrollBooster or referencing its source code, you will encounter several configuration files in the root directory. This page explains what they do and how they govern the project's build and formatting pipeline.

ScrollBooster maintains a very lean configuration footprint, relying heavily on standard tools like Webpack and Babel.

Build Pipeline: `webpack.config.js`

The project uses Webpack 4 to bundle the source code (src/index.js) into a production-ready, minified module (dist/scrollbooster.min.js).

Key Webpack Characteristics:

Entry/Output: It takes ./src/index.js and outputs it as an UMD (Universal Module Definition) module. This ensures the library can be consumed via AMD (define), CommonJS (require), or globally (window.ScrollBooster).
Babel Integration: It pipes all .js files through babel-loader.
Optimization: optimization.minimize: true utilizes Terser to heavily minify the output, achieving the ~2KB gzipped footprint.
Dev Server: It configures webpack-dev-server to host the root directory, allowing developers to test against test/index.html on a local port.

Transpilation: `.babelrc`

ScrollBooster is written using modern ES6+ features (Classes, Arrow Functions, Spread operators). However, to fulfill its promise of supporting IE11, it must be transpiled to ES5.

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-object-rest-spread", "add-module-exports"]
}

@babel/preset-env: A smart preset that allows the use of the latest JavaScript without needing to micromanage syntax transforms. It targets environments specified in the browserslist array inside package.json.
add-module-exports: This plugin solves a specific CommonJS compatibility issue with Babel 7. It ensures that module.exports = ScrollBooster is generated properly, rather than requiring users to do require('scrollbooster').default.

Package Definition: `package.json`

The package.json file dictates the dependencies, scripts, and target environments.

Important Scripts:

yarn dev: Runs Webpack in watch mode for local development. Changes to src are instantly recompiled.
yarn build: Compiles the final production output into the /dist directory. This must be run before submitting a PR.
yarn start: Spins up the Webpack dev server.

Browser Support Target (`browserslist`):

"browserslist": [
  "> 0.25%",
  "not dead"
]

This query instructs Babel to transpile code compatible with all browsers that have more than 0.25% global usage and are still officially supported/alive. This inherently covers IE11, Edge, and modern browsers.

Code Style & Formatting

To ensure consistency across pull requests, the repository utilizes EditorConfig and Prettier.

`.editorconfig`

Ensures that whoever opens the project in a compatible IDE (VSCode, WebStorm, etc.) has their indentation and line-endings forced to match the project standard.

Indent Style: Spaces
Indent Size: 4
End of Line: LF (Unix)
Trailing Whitespace: Trimmed automatically

`.prettierrc.js`

Enforces strict JavaScript stylistic rules via Prettier. If you are contributing, ensure your IDE is configured to format-on-save using Prettier, or run it manually before committing.

module.exports = {
  singleQuote: true,     // Uses ' instead of "
  trailingComma: 'es5',  // Adds commas to objects/arrays, avoiding diff noise
  arrowParens: 'always', // Forces (x) => {} instead of x => {}
  printWidth: 120,       // Allows slightly longer lines than default
  tabWidth: 4,           // Matches .editorconfig
};

Project Configuration Files

Build Pipeline: webpack.config.js

Key Webpack Characteristics:

Transpilation: .babelrc

Package Definition: package.json