如何让esbuild的配置被Rails正确读取

0.动机

在[BootrAils]，我们目前正在考虑放弃整个默认的 "Rails Way "来管理前端资产（CSS、图片、JS等），用ViteJS来代替它。

然而，对于那些对这种 "Rails方式 "感兴趣的人来说，这里有一个技巧，允许更多的esbuild配置。

在经典的Rails 7应用中，代替Webpacker，jsbundling完成了大部分的工作。在引擎盖下，esbuild被包裹在jsbundling中。但如果你想定制这个构建，该怎么办？

1.前提条件

$> ruby -v  
ruby 3.0.0p0 // you need at least version 3 here  
$> bundle -v  
Bundler version 2.2.11  
$> npm -v  
8.3.0 // you need at least version 7.1 here  
$> yarn -v  
1.22.10 

任何上面的版本都可以使用。

构建一个默认的Rails 7应用程序

mkdir customesbuild && cd customesbuild  
echo "source 'https://rubygems.org'" > Gemfile  
echo "gem 'rails', '7.0.0'" >> Gemfile  
bundle install  
bundle exec rails new . --force --css=bootstrap

# Create a default controller
echo "class WelcomeController < ApplicationController" > app/controllers/welcome_controller.rb
echo "end" >> app/controllers/welcome_controller.rb

# Create a default route
echo "Rails.application.routes.draw do" > config/routes.rb
echo '  get "welcome/index"' >> config/routes.rb
echo '  root to: "welcome#index"' >> config/routes.rb
echo 'end' >> config/routes.rb

# Create a default view
mkdir app/views/welcome
echo '<h1>This is h1 title</h1>' > app/views/welcome/index.html.erb

# Create database and schema.rb
bin/rails db:create
bin/rails db:migrate

附注1：对于Rails 7.0.0，如果你不指定任何css框架，Rails默认不会给你任何jsbundling。你将不得不依赖Sprokets（用于CSS）和importmaps（用于JS）。

检查一切工作是否正常

修改application.js，如下所示

// inside app/javascript/application.js
import "@hotwired/turbo-rails"
import "./controllers"
import * as bootstrap from "bootstrap"

console.log("I am the default application.js")

然后到你的终端，并输入

./bin/dev

现在打开你的浏览器，显示的标题应该足够大，这意味着CSS被正确加载（我们在这里依赖Bootstrap），如果你打开开发者工具，在 "控制台 "标签中，你应该能够看到 "我是默认的application.js"。这意味着我们的JavaScript也被正确配置了。

修改package.json

默认的package.json应该是这样的

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.0.1",
    "@hotwired/turbo-rails": "^7.1.0",
    "@popperjs/core": "^2.11.2",
    "bootstrap": "^5.1.3",
    "esbuild": "^0.14.11",
    "sass": "^1.48.0"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }
}

现在把名为 "build "的属性改为这样。

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.0.1",
    "@hotwired/turbo-rails": "^7.1.0",
    "@popperjs/core": "^2.11.2",
    "bootstrap": "^5.1.3",
    "esbuild": "^0.14.11",
    "sass": "^1.48.0"
  },
  "scripts": {
    "build": "node esbuild.config.js",
    "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }
}

很好!我们没有任何名为esbuild.config.js的文件，所以让我们在我们项目的根部构建它。

创建esbuild.config.js

现在在你的项目根部创建esbuild.config.js，如下所示。

const path = require('path');

require("esbuild").build({
  entryPoints: ["application.js"],
  bundle: true,
  outdir: path.join(process.cwd(), "app/assets/builds"),
  absWorkingDir: path.join(process.cwd(), "app/javascript"),
  watch: true,
  // custom plugins will be inserted is this array
  plugins: [],
}).catch(() => process.exit(1));

正如你可能已经注意到的，"plugins "属性允许你添加任何在npm生态系统中可用的esbuild插件。当然，所有其他属性都可以根据需要添加/修改。但至少你有了最基本的东西，不会损害默认的Rails前端资产管理。

重新启动你的本地开发服务器

停止本地服务器。重新启动它：在你的终端中，输入

./bin/dev

你应该在日志中间的某个地方看到node esbuild.config.js --watch:)

./bin/dev
14:25:45 web.1  | started with pid 69446
14:25:45 js.1   | started with pid 69447
14:25:45 css.1  | started with pid 69448
14:25:45 js.1   | yarn run v1.22.10
14:25:45 css.1  | yarn run v1.22.10
14:25:45 css.1  | $ sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules --watch
14:25:45 js.1   | $ node esbuild.config.js --watch
14:25:46 web.1  | => Booting Puma
14:25:46 web.1  | => Rails 7.0.0 application starting in development 
14:25:46 web.1  | => Run `bin/rails server --help` for more startup options
14:25:46 css.1  | Sass is watching for changes. Press Ctrl-C to stop.

这意味着我们自己的esbuild配置被Rails正确读取。

在你的浏览器中检查CSS和JS是否正常工作，如上所述。

完成了!