{"id":11990,"library":"scriptjs","title":"Script.js - Asynchronous JavaScript Loader","description":"$script.js is a compact, asynchronous JavaScript loader and dependency manager designed for browser environments. Its primary function is to load JavaScript resources on demand without blocking the rendering of other assets like CSS and images, a common issue with traditional `<script>` tags. The library, currently at version 2.5.9, focuses on simplifying dependency management for complex web applications by allowing scripts to be loaded in parallel and executed once their dependencies are met, using a unique `ready` callback mechanism. It differentiates itself through its lightweight footprint and its ability to manage intricate load sequences using named bundles or individual script IDs, making it suitable for older browser environments (IE6+, Opera10+). However, its release cadence appears to be very slow, with the last known stable version 2.5.9 released quite some time ago, indicating a maintenance or effectively abandoned status given the prevalence of modern bundlers.","status":"maintenance","version":"2.5.9","language":"javascript","source_language":"en","source_url":"https://github.com/ded/script.js","tags":["javascript","ender","script","dependency","ajax","jsonp","loader"],"install":[{"cmd":"npm install scriptjs","lang":"bash","label":"npm"},{"cmd":"yarn add scriptjs","lang":"bash","label":"yarn"},{"cmd":"pnpm add scriptjs","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"$script.js operates by exposing a global `$script` object. It is typically loaded via a `<script>` tag in HTML. It does not use standard CommonJS `require()` or ES Modules `import` syntax.","wrong":"import $script from 'script.js'","symbol":"$script","correct":"<!-- In HTML --> <script src=\"script.js\"></script>\n// In JavaScript, after loading\n$script('script.js', callback)"},{"note":"`$script.ready` is a method on the global `$script` object used to register callbacks that execute once specified script bundles or individual scripts are loaded and ready. It's the primary mechanism for dependency fulfillment.","wrong":"import { ready } from '$script';","symbol":"$script.ready","correct":"$script.ready('bundleName', function() { /* code */ });"},{"note":"`$script.path` is a global configuration method used to set a base path for all subsequent relative script loads. It must be called directly on the global `$script` object. To circumvent it for a single script, use `$script.get()`.","wrong":"$script().path('/js/modules/');","symbol":"$script.path","correct":"$script.path('/js/modules/');"}],"quickstart":{"code":"$script.path('/assets/js/');\n\n// Load jQuery and a jQuery plugin concurrently, assigning them to a 'vendor' bundle ID\n$script(['jquery-3.x.min.js', 'my-jquery-plugin.js'], 'vendor', function() {\n  console.log('jQuery and plugin loaded. Initializing application...');\n});\n\n// Load a core application module separately\n$script('app-core.js', 'appCore');\n\n// Wait for both the 'vendor' bundle and 'appCore' module to be ready\n$script.ready(['vendor', 'appCore'], function() {\n  console.log('All core scripts are loaded and ready.');\n  // Application initialization code that depends on all these scripts\n  // For example, if jQuery is globally available via `window.$`\n  if (typeof window.$ !== 'undefined') {\n    console.log('jQuery version:', $.fn.jquery);\n  }\n  // Your application's main entry point\n  // myApp.init();\n}, function(depsNotFound) {\n  console.error('Some dependencies were not found:', depsNotFound);\n  // Optionally, try to lazy load missing dependencies\n});","lang":"javascript","description":"Demonstrates loading multiple scripts, grouping them into a bundle, setting a base path, and using the `$script.ready` callback for deferred execution based on named dependencies."},"warnings":[{"fix":"For modern web development, consider using native ES Modules with import maps, or a module bundler like Webpack, Rollup, or Vite. If dynamic script loading is required, investigate `import()` for ES Modules or specialized libraries like SystemJS if broader module format support is needed.","message":"This library is primarily designed for older browser environments and traditional server-rendered applications. It does not integrate well with modern JavaScript module systems (ES Modules, CommonJS) or bundlers (Webpack, Rollup, Vite) and might cause unexpected behavior or global scope pollution when used alongside them.","severity":"breaking","affected_versions":"All versions"},{"fix":"Encapsulate your script code using Immediately Invoked Function Expressions (IIFEs) or module patterns to limit scope pollution: `(function() { /* your code */ })();`.","message":"All scripts loaded via `$script.js` execute in the global scope. Variables and functions defined in these scripts will become global properties unless explicitly wrapped in IIFEs or closures, leading to potential naming conflicts.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Evaluate alternatives that are actively maintained and align with current web development practices, such as native ES Modules with dynamic `import()`, or modern module bundlers.","message":"The `script.js` project appears to be largely unmaintained. While functional for its intended use case, it has not seen significant updates or new feature development for several years. This means it may not address modern web standards, security concerns, or performance optimizations.","severity":"deprecated","affected_versions":">=2.x"},{"fix":"Use `$script.urlArgs('')` to clear previously set arguments when they are no longer needed. For cache busting, consider using versioned filenames (e.g., `app.v1.2.3.js`) or HTTP headers for cache control, which are generally more cache-friendly.","message":"The `$script.urlArgs()` feature, while useful for cache busting, appends a query string to *all* subsequent script loads. This can prevent proxy caches (like Squid) from caching resources, potentially impacting performance for users behind such proxies.","severity":"gotcha","affected_versions":">=2.5.5"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure that `<script src=\"path/to/script.js\"></script>` is included in your HTML before any custom JavaScript code that calls `$script()` methods.","cause":"The script.js library file has not been loaded into the page before your application code attempts to use the `$script` global.","error":"Uncaught ReferenceError: $script is not defined"},{"fix":"Verify the correct loading order and ensure the `script.js` file path is accurate. If dynamically loading `script.js` itself, ensure its load callback is fired before attempting to use `$script` methods.","cause":"Similar to the `ReferenceError`, this occurs when the `$script` object is not available or fully initialized when its methods like `ready` are called.","error":"TypeError: Cannot read properties of undefined (reading 'ready')"},{"fix":"Check the script URL for typos. Verify the script exists at the specified path. Use the optional error callback in `$script.ready()` to handle cases where dependencies are not found: `$script.ready(['dep'], function(){}, function(depsNotFound){ /* handle missing deps */ });`","cause":"A script specified in `$script()` or `$script.get()` could not be fetched due to a wrong URL, network issue, or server error.","error":"The script at 'http://example.com/missing.js' failed to load."}],"ecosystem":"npm"}