{"_id":"@agney/shakapacker","name":"@agney/shakapacker","dist-tags":{"latest":"6.6.0"},"versions":{"6.6.0":{"name":"@agney/shakapacker","version":"6.6.0","description":"Use webpack to manage app-like JavaScript modules in Rails","main":"package/index.js","engines":{"node":"^12.13.0 || ^14 || >=16","yarn":">=1 <4"},"peerDependencies":{"@babel/core":"^7.17.9","@babel/plugin-transform-runtime":"^7.17.0","@babel/preset-env":"^7.16.11","@babel/runtime":"^7.17.9","@rspack/core":"^1.2.6","babel-loader":"^8.2.4 || ^9.0.0","compression-webpack-plugin":"^9.0.0 || ^10.0.0","terser-webpack-plugin":"^5.3.1","webpack":"^5.72.0","webpack-cli":"^4.9.2 || ^5.0.0","webpack-dev-server":"^4.9.0","webpack-merge":"^5.8.0"},"dependencies":{"@rspack/core":"^1.2.6","glob":"^7.2.0","js-yaml":"^4.1.0","path-complete-extname":"^1.0.0","rspack-manifest-plugin":"^5.0.3","webpack-assets-manifest":"^5.2.1"},"devDependencies":{"babel-loader":"^8.2.4","compression-webpack-plugin":"^9.0.0","esbuild-loader":"^2.18.0","eslint":"^7.32.0","eslint-config-airbnb":"^18.2.1","eslint-config-prettier":"^8.3.0","eslint-plugin-import":"^2.24.2","eslint-plugin-jsx-a11y":"^6.4.1","eslint-plugin-react":"^7.26.0","jest":"^28.1.3","memory-fs":"^0.5.0","swc-loader":"^0.1.15","thenify":"^3.3.1","webpack":"^5.72.0","webpack-merge":"^5.8.0"},"jest":{"testRegex":"(/__tests__/.*|(\\.|/))\\.jsx?$","testPathIgnorePatterns":["/__fixtures__/","/__utils__/"],"roots":["/package"]},"publishConfig":{"access":"public"},"scripts":{"test":"jest","lint":"eslint package/"},"repository":{"type":"git","url":"git+https://github.com/shakacode/shakapacker.git"},"author":{"name":"David Heinemeier Hansson","email":"david@basecamp.com"},"license":"MIT","bugs":{"url":"https://github.com/shakacode/shakapacker/issues"},"homepage":"https://github.com/shakacode/shakapacker","_id":"@agney/shakapacker@6.6.0","gitHead":"a1ce68b4e2671a1ca70fd1727d935b77cc382ddb","_nodeVersion":"22.14.0","_npmVersion":"11.1.0","dist":{"integrity":"sha512-K9gylrj9NybG/06GTel+kIxbF9QbrpAOi8hUyHOqze38XGNgZwvqrHJMMKyNF6z3/ipVURziI3zu2LLg3KxQ5w==","shasum":"176bc9799b994e842e2a6d9464a706d10c137b78","tarball":"https://registry.npmjs.org/@agney/shakapacker/-/shakapacker-6.6.0.tgz","fileCount":49,"unpackedSize":91956,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDrPPxe9APE4DCX1uWVkmPlz7lXBvCnprAaqct8kV2c5AiEAvc8QSlQmVworfqvXmBV5p52WTDmsp6c9HJ1YIGGJyFg="}]},"_npmUser":{"name":"agney","email":"agney@outlook.in"},"directories":{},"maintainers":[{"name":"agney","email":"agney@outlook.in"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/shakapacker_6.6.0_1740985187578_0.3239115425638759"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-03T06:59:47.506Z","6.6.0":"2025-03-03T06:59:47.770Z","modified":"2025-03-03T06:59:48.747Z"},"maintainers":[{"name":"agney","email":"agney@outlook.in"}],"description":"Use webpack to manage app-like JavaScript modules in Rails","homepage":"https://github.com/shakacode/shakapacker","repository":{"type":"git","url":"git+https://github.com/shakacode/shakapacker.git"},"author":{"name":"David Heinemeier Hansson","email":"david@basecamp.com"},"bugs":{"url":"https://github.com/shakacode/shakapacker/issues"},"license":"MIT","readme":"# Shakapacker\n\n_Official, actively maintained successor to [rails/webpacker](https://github.com/rails/webpacker). Internal naming for `shakapacker` will continue to use `webpacker` where possible for v6. ShakaCode stands behind the long-term maintainence and development of this project for the Rails community._\n\n* See [V6 Upgrade](./docs/v6_upgrade.md) for upgrading from v5 or prior v6 releases.\n\n[![Ruby specs](https://github.com/shakacode/shakapacker/workflows/Ruby%20specs/badge.svg)](https://github.com/shakacode/shakapacker/actions)\n[![Jest specs](https://github.com/shakacode/shakapacker/workflows/Jest%20specs/badge.svg)](https://github.com/shakacode/shakapacker/actions)\n[![Rubocop](https://github.com/shakacode/shakapacker/workflows/Rubocop/badge.svg)](https://github.com/shakacode/shakapacker/actions)\n[![JS lint](https://github.com/shakacode/shakapacker/workflows/JS%20lint/badge.svg)](https://github.com/shakacode/shakapacker/actions)\n\n[![node.js](https://img.shields.io/badge/node-%3E%3D%2012.0.0-brightgreen.svg)](https://www.npmjs.com/package/shakapacker)\n[![Gem](https://img.shields.io/gem/v/shakapacker.svg)](https://rubygems.org/gems/shakapacker)\n[![npm version](https://badge.fury.io/js/shakapacker.svg)](https://badge.fury.io/js/shakapacker)\n\nShakpacker makes it easy to use the JavaScript pre-processor and bundler [Webpack v5+](https://webpack.js.org/)\nto manage frontend JavaScript in Rails. It can coexist with the asset pipeline,\nleaving Webpack responsible solely for frontend JavaScript, or can be used exclusively, making it also responsible for images, fonts, and CSS.\n\nCheck out 6.1.1+ for [SWC](https://swc.rs/) and [esbuild-loader](https://github.com/privatenumber/esbuild-loader) support! They are faster than Babel!\n\nSee a comparison of [Shakapacker with jsbundling-rails](https://github.com/rails/jsbundling-rails/blob/main/docs/comparison_with_webpacker.md).\n\nFor discussions, see our [Slack Channel](https://reactrails.slack.com/join/shared_invite/enQtNjY3NTczMjczNzYxLTlmYjdiZmY3MTVlMzU2YWE0OWM0MzNiZDI0MzdkZGFiZTFkYTFkOGVjODBmOWEyYWQ3MzA2NGE1YWJjNmVlMGE).\n\n---\n### ShakaCode Support\n\n[ShakaCode](https://www.shakacode.com) offers support for upgrading from webpacker and using Shakapacker. If interested, contact Justin Gordon, [justin@shakacode.com](mailto:justin@shakacode.com). We're also [hiring](https://jobs.lever.co/shakacode/3bdbfdb3-4495-4611-a279-01dddb351abe)!\n\nHere's a testimonial of how ShakaCode can help, from [Florian Gâßler](https://github.com/FGoessler) of [Blinkist](https://www.blinkist.com/), January 2, 2023:\n> Hey Justin πŸ‘‹\n>\n> I just wanted to let you know that we today shipped the webpacker to shakapacker upgrades and it all seems to be running smoothly! Thanks again for all your support and your teams work! 😍\n>\n> On top of your work, it was now also very easy for me to upgrade Tailwind and include our external node_module based web component library which we were using for our other (more modern) apps already. That work is going to be shipped later this week though as we are polishing the last bits of it. πŸ˜‰\n>\n> Have a great 2023 and maybe we get to work together again later in the year! πŸ™Œ\n\n---\n\n\n\n\n - [Prerequisites](#prerequisites)\n - [Features](#features)\n - [Optional support](#optional-support)\n - [Installation](#installation)\n - [Rails v6+](#rails-v6)\n - [Note for Yarn v2 usage](#note-for-yarn-v2-usage)\n - [Concepts](#concepts)\n - [Usage](#usage)\n - [Configuration and Code](#configuration-and-code)\n - [View Helpers](#view-helpers)\n - [View Helpers `javascript_pack_tag` and `stylesheet_pack_tag`](#view-helpers-javascript_pack_tag-and-stylesheet_pack_tag)\n - [View Helpers `append_javascript_pack_tag`, `prepend_javascript_pack_tag` and `append_stylesheet_pack_tag`](#view-helper-append_javascript_pack_tag-prepend_javascript_pack_tag-and-append_stylesheet_pack_tag)\n - [View Helper: `asset_pack_path`](#view-helper-asset_pack_path)\n - [View Helper: `image_pack_tag`](#view-helper-image_pack_tag)\n - [View Helper: `favicon_pack_tag`](#view-helper-favicon_pack_tag)\n - [View Helper: `preload_pack_asset`](#view-helper-preload_pack_asset)\n - [Images in Stylesheets](#images-in-stylesheets)\n - [Server-Side Rendering (SSR)](#server-side-rendering-ssr)\n - [Development](#development)\n - [Automatic Webpack Code Building](#automatic-webpack-code-building)\n - [Compiler strategies](#compiler-strategies)\n - [Common Development Commands](#common-development-commands)\n - [Webpack Configuration](#webpack-configuration)\n - [Babel configuration](#babel-configuration)\n - [SWC configuration](#swc-configuration)\n - [esbuild loader configuration](#esbuild-loader-configuration)\n - [Integrations](#integrations)\n - [React](#react)\n - [Typescript](#typescript)\n - [CSS](#css)\n - [Postcss](#postcss)\n - [Sass](#sass)\n - [Less](#less)\n - [Stylus](#stylus)\n - [CoffeeScript](#coffeescript)\n - [Other frameworks](#other-frameworks)\n - [Custom Rails environments](#custom-rails-environments)\n - [Upgrading](#upgrading)\n - [Paths](#paths)\n - [Additional paths](#additional-paths)\n - [Deployment](#deployment)\n - [Example Apps](#example-apps)\n - [Troubleshooting](#troubleshooting)\n - [Contributing](#contributing)\n - [License](#license)\n- [Supporters](#supporters)\n\n\n\n## Prerequisites\n\n- Ruby 2.6+\n- Rails 5.2+\n- Node.js 12.13.0+ || 14+\n- Yarn\n\n## Features\n- Rails view helpers that fully support Webpack output, including HMR and code splitting.\n- Convenient but not required webpack configuration. The only requirement is that your webpack configuration create a manifest.\n- HMR with the webpack-dev-server, such as for hot-reloading React!\n- Automatic code splitting using multiple entry points to optimize JavaScript downloads.\n- [Webpack v5+](https://webpack.js.org/)\n- ES6 with [babel](https://babeljs.io/), [SWC](https://swc.rs/), or [Esbuild](https://github.com/privatenumber/esbuild-loader)\n- Asset compression, source-maps, and minification\n- CDN support\n- Extensible and configurable. For example, all major dependencies are specified as peers, so you can upgrade easily.\n\n### Optional support\n _Requires extra packages to be installed._\n - React\n - TypeScript\n - Stylesheets - Sass, Less, Stylus and Css, PostCSS\n - CoffeeScript\n\n## Installation\n\n### Rails v6+\n\nWith Rails v6+, skip JavaScript for a new app and follow below Manual Installation Steps to manually add the `shakapacker` gem to your Gemfile.\n```bash\nrails new myapp --skip-javascript\n```\n\n_Note, Rails 6 installs the older v5 version of webpacker unless you specify `--skip-javascript`._\n\nAdd `shakapacker` gem to your `Gemfile`:\n\n```bash\nbundle add shakapacker --strict\n```\n\nThen running the following to install Webpacker:\n\n```bash\n./bin/bundle install\n./bin/rails webpacker:install\n```\n\nWhen `package.json` and/or `yarn.lock` changes, such as when pulling down changes to your local environment in a team settings, be sure to keep your NPM packages up-to-date:\n\n```bash\nyarn\n```\n\nNote, in v6+, most JS packages are peer dependencies. Thus, the installer will add the packages:\n\n```bash\nyarn add @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/runtime babel-loader \\\n compression-webpack-plugin terser-webpack-plugin \\\n webpack webpack-assets-manifest webpack-cli webpack-merge webpack-sources webpack-dev-server\n```\n\nPreviously, these \"webpack\" and \"babel\" packages were direct dependencies for `webpacker`. By\nmaking these peer dependencies, you have control over the versions used in your webpack and babel configs.\n\n### Note for Yarn v2 usage\n\nIf you are using Yarn v2 (berry), please note that PnP modules are not supported.\n\nIn order to use Shakapacker with Yarn v2, make sure you set `nodeLinker: node-modules` in your `.yarnrc.yml` file as per the [Yarn docs](https://yarnpkg.com/getting-started/migration#step-by-step) to opt out of Plug'n'Play behaviour.\n\n## Concepts\n\nAt it's core, Shakapacker's essential functionality is to:\n\n1. Provide configuration by a single file used by both Rails view helpers and JavaScript webpack compilation code.\n2. Provide Rails view helpers, utilizing this configuration file, so that a webpage can load JavaScript, CSS, and other static assets compiled by webpack, supporting bundle splitting, fingerprinting, and HMR.\n3. Provide a community supported, default webpack compilation that generates the necessary bundles and manifest, using the same configuration file. This compilation can be extended for any needs.\n\n## Usage\n\n### Configuration and Code\n\nYou will need your file system to correspond to the setup of your `webpacker.yml` file.\n\nSuppose you have the following configuration:\n\n`webpacker.yml`\n```yml\ndefault: &default\n source_path: app/javascript\n source_entry_path: packs \n public_root_path: public\n public_output_path: packs\n nested_entries: false\n# And more\n```\n\nAnd that maps to a directory structure like this:\n\n```\napp/javascript:\n └── packs: # sets up webpack entries\n β”‚ └── application.js # references ../src/my_component.js\n β”‚ └── application.css\n └── src: # any directory name is fine. Referenced files need to be under source_path\n β”‚ └── my_component.js\n └── stylesheets:\n β”‚ └── my_styles.css\n └── images:\n └── logo.svg\npublic/packs # webpack output\n```\n\nWebpack intelligently includes only necessary files. In this example, the file `packs/application.js` would reference `../src/my_component.js`\n\n`nested_entries` allows you to have webpack entry points nested in subdirectories. This defaults to false so you don't accidentally create entry points for an entire tree of files. In other words, with `nested_entries: false`, you can have your entire `source_path` used for your source (using the `source_entry_path: /`) and you place files at the top level that you want as entry points. `nested_entries: true` allows you to have entries that are in subdirectories. This is useful if you have entries that are generated, so you can have a `generated` subdirectory and easily separate generated files from the rest of your codebase.\n\n### View Helpers\nThe Shakapacker view helpers generate the script and link tags to get the webpack output onto your views.\n\nBe sure to consult the API documentation in the source code of [helper.rb](./lib/webpacker/helper.rb).\n\n**Note:** In order for your styles or static assets files to be available in your view, you would need to link them in your \"pack\" or entry file. Otherwise, Webpack won't know to package up those files.\n\n#### View Helpers `javascript_pack_tag` and `stylesheet_pack_tag`\n\nThese view helpers take your `webpacker.yml` configuration file, along with the resulting webpack compilation `manifest.json` and generates the HTML to load the assets.\n\nYou can then link the JavaScript pack in Rails views using the `javascript_pack_tag` helper. If you have styles imported in your pack file, you can link them by using `stylesheet_pack_tag`:\n\n```erb\n<%= javascript_pack_tag 'application' %>\n<%= stylesheet_pack_tag 'application' %>\n```\n\nThe `javascript_pack_tag` and `stylesheet_pack_tag` helpers will include all the transpiled\npacks with the chunks in your view, which creates html tags for all the chunks.\n\nYou can provide multiple packs and other attributes. Note, `defer` defaults to showing.\n\n```erb\n<%= javascript_pack_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %>\n```\n\nThe resulting HTML would look like:\n```\n\n\n\n\n\n```\n\nIn this output, both the calendar and map codes might refer to other common libraries. Those get placed something like the vendor bundle. The view helper removes any duplication.\n\nNote, the default of \"defer\" for the `javascript_pack_tag`. You can override that to `false`. If you expose jquery globally with `expose-loader,` by using `import $ from \"expose-loader?exposes=$,jQuery!jquery\"` in your `app/javascript/application.js`, pass the option `defer: false` to your `javascript_pack_tag`.\n\n**Important:** Pass all your pack names as multiple arguments, not multiple calls, when using `javascript_pack_tag` and the `stylesheet_pack_tag`. Otherwise, you will get duplicated chunks on the page. \n\n```erb\n<%# DO %>\n<%= javascript_pack_tag 'calendar', 'map' %>\n\n<%# DON'T %>\n<%= javascript_pack_tag 'calendar' %>\n<%= javascript_pack_tag 'map' %>\n```\nWhile this also generally applies to `stylesheet_pack_tag`, you may use multiple calls to stylesheet_pack_tag if, say, you require multiple