diff --git a/README.md b/README.md index 5ead90e..ed14f60 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ Use [Bun](https://bun.sh), [esbuild](https://esbuild.github.io), [rollup.js](https://rollupjs.org), or [Webpack](https://webpack.js.org) to bundle your JavaScript, then deliver it via the asset pipeline in Rails. This gem provides installers to get you going with the bundler of your choice in a new Rails application, and a convention to use `app/assets/builds` to hold your bundled output as artifacts that are not checked into source control (the installer adds this directory to `.gitignore` by default). -You develop using this approach by running the bundler in watch mode in a terminal with `yarn build --watch` (and your Rails server in another, if you're not using something like [puma-dev](https://github.com/puma/puma-dev)). You can also use `./bin/dev`, which will start both the Rails server and the JS build watcher (along with a CSS build watcher, if you're also using `cssbundling-rails`). +You develop using this approach by running the bundler in watch mode in a terminal with `npm run build -- --watch` (and your Rails server in another, if you're not using something like [puma-dev](https://github.com/puma/puma-dev)). You can also use `./bin/dev`, which will start both the Rails server and the JS build watcher (along with a CSS build watcher, if you're also using `cssbundling-rails`). Whenever the bundler detects changes to any of the JavaScript files in your project, it'll bundle `app/javascript/application.js` into `app/assets/builds/application.js` (and all other entry points configured). You can refer to the build output in your layout using the standard asset pipeline approach with `<%= javascript_include_tag "application", defer: true %>`. diff --git a/docs/switch_from_webpacker.md b/docs/switch_from_webpacker.md index 8f83a5a..8e47d7d 100644 --- a/docs/switch_from_webpacker.md +++ b/docs/switch_from_webpacker.md @@ -68,7 +68,7 @@ If you would like to minimize the diff between Webpacker and jsbundling-rails: ```diff # Remove from your config/initializers/assets.rb --# Add Yarn node_modules folder to the asset load path. +-# Add node_modules folder to the asset load path. -Rails.application.config.assets.paths << Rails.root.join('node_modules') ``` @@ -93,7 +93,7 @@ Webpacker includes [many dependencies](https://github.com/rails/webpacker/blob/5 ```sh # From the CLI, remove Webpacker packages -yarn remove @rails/webpacker webpack-dev-server +npm uninstall @rails/webpacker webpack-dev-server ``` ### Optional: Babel @@ -104,7 +104,7 @@ yarn remove @rails/webpacker webpack-dev-server ```sh # From the CLI, add babel presets -yarn add @babel/core @babel/preset-env babel-loader +npm install @babel/core @babel/preset-env babel-loader ``` 2. Configure Babel @@ -141,7 +141,7 @@ You can use Babel to transpile front-end frameworks and TypeScript. This example ```sh # From the CLI, add babel presets -yarn add @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript +npm install @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript ``` 2. Configure Babel @@ -182,7 +182,7 @@ With the right loaders, webpack can handle CSS files. This setup _only_ uses jsb ```sh # From the CLI, add loaders, plugins, and node sass -yarn add css-loader sass sass-loader mini-css-extract-plugin webpack-remove-empty-scripts +npm install css-loader sass sass-loader mini-css-extract-plugin webpack-remove-empty-scripts ``` 2. Configure webpack @@ -233,7 +233,7 @@ With the right loaders, webpack can handle other files. This setup may vary on y 1. Install packages ```sh -yarn add file-loader +npm install file-loader ``` 2. Configure webpack @@ -275,7 +275,7 @@ module.exports = { Confirm you have a working webpack configuration. You can rebuild the bundle with: ```sh -yarn build --progress --color +npm run build -- --progress --color ``` If you have multiple entries, it's recommended to confirm one at a time, and finally the entire bundle. diff --git a/lib/install/Procfile.dev b/lib/install/Procfile.dev index b19ff76..d1e741d 100644 --- a/lib/install/Procfile.dev +++ b/lib/install/Procfile.dev @@ -1,2 +1,2 @@ web: env RUBY_DEBUG_OPEN=true bin/rails server -js: yarn build --watch +js: npm run build -- --watch diff --git a/lib/install/esbuild/install.rb b/lib/install/esbuild/install.rb index a9f91bc..430d725 100644 --- a/lib/install/esbuild/install.rb +++ b/lib/install/esbuild/install.rb @@ -2,7 +2,7 @@ apply "#{__dir__}/../install_procfile.rb" say "Install esbuild" -run "yarn add --dev esbuild" +run "npm install -D esbuild" say "Add build script" build_script = "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets" @@ -10,10 +10,10 @@ case `npx -v`.to_f when 7.1...8.0 run %(npm set-script build "#{build_script}") - run %(yarn build) + run %(npm run build) when (8.0..) run %(npm pkg set scripts.build="#{build_script}") - run %(yarn build) + run %(npm run build) else say %(Add "scripts": { "build": "#{build_script}" } to your package.json), :green end diff --git a/lib/install/install_procfile.rb b/lib/install/install_procfile.rb index f4ed3bf..f6dda4c 100644 --- a/lib/install/install_procfile.rb +++ b/lib/install/install_procfile.rb @@ -1,5 +1,5 @@ if Rails.root.join("Procfile.dev").exist? - append_to_file "Procfile.dev", "js: yarn build --watch\n" + append_to_file "Procfile.dev", "js: npm run build -- --watch\n" else say "Add default Procfile.dev" copy_file "#{__dir__}/Procfile.dev", "Procfile.dev" diff --git a/lib/install/rollup/install.rb b/lib/install/rollup/install.rb index ef98c48..e59e0d2 100644 --- a/lib/install/rollup/install.rb +++ b/lib/install/rollup/install.rb @@ -3,7 +3,7 @@ say "Install rollup with config" copy_file "#{__dir__}/rollup.config.js", "rollup.config.js" -run "yarn add --dev rollup @rollup/plugin-node-resolve" +run "npm install -D rollup @rollup/plugin-node-resolve" say "Add build script" build_script = "rollup -c --bundleConfigAsCjs rollup.config.js" @@ -11,10 +11,10 @@ case `npx -v`.to_f when 7.1...8.0 run %(npm set-script build "#{build_script}") - run %(yarn build) + run %(npm run build) when (8.0..) run %(npm pkg set scripts.build="#{build_script}") - run %(yarn build) + run %(npm run build) else say %(Add "scripts": { "build": "#{build_script}" } to your package.json), :green end diff --git a/lib/install/webpack/install.rb b/lib/install/webpack/install.rb index 665f4cc..a84d937 100644 --- a/lib/install/webpack/install.rb +++ b/lib/install/webpack/install.rb @@ -3,7 +3,7 @@ say "Install Webpack with config" copy_file "#{__dir__}/webpack.config.js", "webpack.config.js" -run "yarn add --dev webpack webpack-cli" +run "npm install -D webpack webpack-cli" say "Add build script" build_script = "webpack --config webpack.config.js" @@ -11,10 +11,10 @@ case `npx -v`.to_f when 7.1...8.0 run %(npm set-script build "#{build_script}") - run %(yarn build) + run %(npm run build) when (8.0..) run %(npm pkg set scripts.build="#{build_script}") - run %(yarn build) + run %(npm run build) else say %(Add "scripts": { "build": "#{build_script}" } to your package.json), :green end diff --git a/lib/tasks/jsbundling/build.rake b/lib/tasks/jsbundling/build.rake index 62ee0aa..d8000de 100644 --- a/lib/tasks/jsbundling/build.rake +++ b/lib/tasks/jsbundling/build.rake @@ -15,7 +15,7 @@ namespace :javascript do end end - build_task.prereqs << :install unless ENV["SKIP_YARN_INSTALL"] || ENV["SKIP_BUN_INSTALL"] + build_task.prereqs << :install unless ENV["SKIP_BUN_INSTALL"] || ENV["SKIP_NPM_INSTALL"] || ENV["SKIP_YARN_INSTALL"] end module Jsbundling @@ -25,9 +25,9 @@ module Jsbundling def install_command case tool when :bun then "bun install" - when :yarn then "yarn install" when :pnpm then "pnpm install" when :npm then "npm install" + when :yarn then "yarn install" else raise "jsbundling-rails: No suitable tool found for installing JavaScript dependencies" end end @@ -35,9 +35,9 @@ module Jsbundling def build_command case tool when :bun then "bun run build" - when :yarn then "yarn build" when :pnpm then "pnpm build" when :npm then "npm run build" + when :yarn then "yarn build" else raise "jsbundling-rails: No suitable tool found for building JavaScript" end end @@ -50,14 +50,14 @@ module Jsbundling case when File.exist?("bun.lockb") then :bun when File.exist?("bun.lock") then :bun - when File.exist?("yarn.lock") then :yarn when File.exist?("pnpm-lock.yaml") then :pnpm when File.exist?("package-lock.json") then :npm + when File.exist?("yarn.lock") then :yarn end end def tool_determined_by_executable - %i[ bun yarn pnpm npm ].each do |exe| + %i[ bun pnpm npm yarn ].each do |exe| return exe if system "command -v #{exe} > /dev/null" end end diff --git a/test/esbuild_installer_test.rb b/test/esbuild_installer_test.rb index 25e1b0c..4ef5a70 100644 --- a/test/esbuild_installer_test.rb +++ b/test/esbuild_installer_test.rb @@ -10,19 +10,19 @@ class EsbuildInstallerTest < ActiveSupport::TestCase out, _err = run_installer File.read("Procfile.dev").tap do |procfile| - assert_match "js: yarn build --watch", procfile + assert_match "js: npm run build -- --watch", procfile end assert_match "STUBBED gem install foreman", out - assert_match %r{STUBBED yarn add.* esbuild}, out + assert_match %r{STUBBED npm install .* esbuild}, out assert_match %r{STUBBED npm (?:set-script build |pkg set scripts.build=)esbuild app/javascript/\*\.\*}, out - assert_match "STUBBED yarn build", out + assert_match "STUBBED npm run build", out end end private def run_installer - stub_bins("gem", "yarn", "npm") + stub_bins("gem","npm") run_command("bin/rails", "javascript:install:esbuild") end end diff --git a/test/rollup_installer_test.rb b/test/rollup_installer_test.rb index cb76fc7..1ecb654 100644 --- a/test/rollup_installer_test.rb +++ b/test/rollup_installer_test.rb @@ -10,22 +10,22 @@ class RollupInstallerTest < ActiveSupport::TestCase out, _err = run_installer File.read("Procfile.dev").tap do |procfile| - assert_match "js: yarn build --watch", procfile + assert_match "js: npm run build -- --watch", procfile end assert_match "STUBBED gem install foreman", out assert File.exist?("rollup.config.js") - assert_match %r{STUBBED yarn add.* rollup}, out + assert_match %r{STUBBED npm install .* rollup}, out assert_match %r{STUBBED npm (?:set-script build |pkg set scripts.build=)rollup .*rollup.config.js}, out - assert_match "STUBBED yarn build", out + assert_match "STUBBED npm run build", out end end private def run_installer - stub_bins("gem", "yarn", "npm") + stub_bins("gem", "npm") run_command("bin/rails", "javascript:install:rollup") end end diff --git a/test/webpack_installer_test.rb b/test/webpack_installer_test.rb index c962a95..8f6b681 100644 --- a/test/webpack_installer_test.rb +++ b/test/webpack_installer_test.rb @@ -10,22 +10,22 @@ class WebpackInstallerTest < ActiveSupport::TestCase out, _err = run_installer File.read("Procfile.dev").tap do |procfile| - assert_match "js: yarn build --watch", procfile + assert_match "js: npm run build -- --watch", procfile end assert_match "STUBBED gem install foreman", out assert File.exist?("webpack.config.js") - assert_match %r{STUBBED yarn add.* webpack}, out + assert_match %r{STUBBED npm install .* webpack}, out assert_match %r{STUBBED npm (?:set-script build |pkg set scripts.build=)webpack --config webpack.config.js}, out - assert_match "STUBBED yarn build", out + assert_match "STUBBED npm run build", out end end private def run_installer - stub_bins("gem", "yarn", "npm") + stub_bins("gem", "npm") run_command("bin/rails", "javascript:install:webpack") end end