{"id":15837,"library":"splittable","title":"Splittable Bundler","description":"Splittable is a JavaScript module bundler designed for efficient code splitting, optimized bundle sizes, and dead code elimination, leveraging Closure Compiler, Babel, and Browserify under the hood. Currently at version 4.0.0, the package appears to be abandoned, with its last known publication several years ago, indicating no ongoing development or maintenance. It differentiates itself by offering a \"zero-configuration\" approach to advanced optimizations, aiming to produce smaller code than contemporary alternatives like Webpack and Rollup (though Rollup at the time lacked code splitting and direct CommonJS support). It supports both ES6 and CommonJS modules (with some caveats) and includes experimental JSX support. While it aims for simplicity, its reliance on Java for Closure Compiler and specific Babel configurations are key operational considerations.","status":"abandoned","version":"4.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/cramforce/splittable","tags":["javascript","bundler","module","code splitting","commonjs","es6","closure compiler","JSX"],"install":[{"cmd":"npm install splittable","lang":"bash","label":"npm"},{"cmd":"yarn add splittable","lang":"bash","label":"yarn"},{"cmd":"pnpm add splittable","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Splittable uses Google Closure Compiler for advanced optimizations, which is a Java-based tool. Therefore, Java must be installed and accessible in the system's PATH.","package":"java","optional":false}],"imports":[{"note":"Splittable is a CommonJS module. Direct ES module `import` syntax is not supported for the bundler itself. The `System.import` described in the README is for loading *output bundles*, not the `splittable` library.","wrong":"import splittable from 'splittable';","symbol":"splittable","correct":"const splittable = require('splittable');"}],"quickstart":{"code":"const splittable = require('splittable');\nconst path = require('path');\nconst fs = require('fs');\n\n// Create a dummy project structure for the example\nconst tempDir = path.join(__dirname, 'temp_splittable_project');\nconst libDir = path.join(tempDir, 'lib');\nconst outDir = path.join(tempDir, 'out');\n\nfs.mkdirSync(libDir, { recursive: true });\nfs.mkdirSync(outDir, { recursive: true });\n\nfs.writeFileSync(path.join(libDir, 'a.js'), 'export function sayHello() { console.log(\"Hello from A!\"); }');\nfs.writeFileSync(path.join(libDir, 'b.js'), 'import { sayHello } from \"./a\"; sayHello(); console.log(\"From B\");');\n\nconsole.log('Starting Splittable bundling...');\nsplittable({\n  modules: [path.join(libDir, 'a.js'), path.join(libDir, 'b.js')],\n  writeTo: outDir,\n  warnings: true // Enable Closure Compiler warnings\n})\n.then(function(info) {\n  if (info.warnings) {\n    console.warn('Compilation successful with warnings:', info.warnings);\n  } else {\n    console.log('Compilation successful.');\n  }\n  console.log('Bundles written to:', outDir);\n})\n.catch(function(reason) {\n  console.error('Compilation failed:', reason);\n})\n.finally(() => {\n  // Clean up dummy project (optional)\n  // fs.rmSync(tempDir, { recursive: true, force: true });\n  // console.log('Cleaned up temporary project directory.');\n});","lang":"javascript","description":"This quickstart demonstrates how to programmatically use Splittable to bundle two entry modules, `a.js` and `b.js`, into separate output bundles, including a shared `_base.js` bundle. It creates a temporary project structure, executes the bundler, and logs success or failure with warnings."},"warnings":[{"fix":"Ensure Java Development Kit (JDK) or Java Runtime Environment (JRE) is installed and its `bin` directory is included in your system's PATH environment variable.","message":"Splittable relies on Java for the Google Closure Compiler. If Java is not installed or correctly configured in the system's PATH, Splittable will fail to run.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Configure your Babel presets to explicitly set `modules: false` for ES6 module transformations. Example: `['es2015', { loose: true, modules: false }]`.","message":"When using Babel with Splittable, it is highly recommended to disable ES6 module transpilation (e.g., `modules: false` in `babel-preset-es2015` or similar presets). Splittable performs its own ES6 module compilation at a later stage, and pre-transpiling modules can lead to \"very poor\" (inefficient or bloated) generated code.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Include a Promise polyfill script (e.g., `<script src=\"path/to/PJs.min.js\"></script>`) before loading your Splittable bundles in HTML for environments without native Promises.","message":"The `System.import` polyfill provided by Splittable's `_base.js` bundle requires a global `Promise` implementation. For older browsers that lack native Promise support, you must supply your own Promise polyfill (e.g., PJS or core-js).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Before any `System.import` calls, define `System.baseURL = '/path/to/your/bundles/';` where `/path/to/your/bundles/` is the web-accessible directory containing `_base.js` and other generated bundles.","message":"When loading bundles with `System.import`, the `System.baseURL` global variable must be explicitly set to the deployed directory of your Splittable bundles. Failing to do so will prevent the loader from finding and importing modules.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Avoid cyclic dependencies in your CommonJS modules. Test NPM modules thoroughly for compatibility. Use `require()` for NPM module imports, regardless of the surrounding module format.","message":"Splittable supports CommonJS modules but with 'some caveats'. Specifically, cyclic dependencies are not supported and some Node.js modules may not be compatible due to environment differences. Also, `require(\"module-name\")` must be used for NPM modules, even inside ES6 modules.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Check the console for any detailed error messages or warnings provided by Splittable or Closure Compiler. Ensure source paths are correct and all dependencies (like Java) are properly set up. Enable `warnings: true` in options for more verbose output.","cause":"A general error indicating issues during the bundling process, potentially due to incorrect configuration, source code errors, or underlying Closure Compiler failures.","error":"Compilation failed"},{"fix":"Verify your Java installation and ensure it's correctly configured in your system's PATH. If `splittable` was globally installed, try reinstalling it. Check for any environment variables that `splittable` might use to locate the Closure Compiler JAR.","cause":"This error indicates that the Java runtime cannot find the Closure Compiler's main class, typically because the Closure Compiler JAR is missing or not accessible to Splittable. This usually points to an issue with the Java installation or Splittable's internal dependency resolution for Closure Compiler.","error":"java.lang.NoClassDefFoundError: com/google/javascript/jscomp/CommandLineRunner"},{"fix":"Include a Promise polyfill in your HTML before loading Splittable's `_base.js` bundle. A common choice is PJs or a polyfill from `core-js`.","cause":"The `System.import` polyfill used by Splittable's generated bundles requires a global `Promise` object, which is missing in older JavaScript environments (e.g., IE11).","error":"ReferenceError: Promise is not defined"},{"fix":"Double-check that `System.baseURL` is correctly set to the root directory where your Splittable bundles (including `_base.js`) are deployed. Verify the exact `module/path` string matches an entry module configured during bundling.","cause":"The `System.import` loader could not find the requested module bundle at the specified path. This often happens if `System.baseURL` is incorrect or the module path itself is misspelled.","error":"Error: Failed to load module 'module/path': 404 Not Found"}],"ecosystem":"npm"}