我在 Rails esbuild 应用程序中遇到了 nodemon 问题。新 Rails 应用程序的 esbuild 设置默认使用 nodemon 来监视 .scss 文件中的更改,并在发生更改时触发 CSS 构建过程 (yarn build:css)。然而,尽管尝试了各种配置和故障排除步骤,我仍无法使其正常工作,并且 ./bin/dev 不断意外结束。我想知道其他人是否有这方面的经验,或者可能知道我可以采取哪些其他步骤来排除故障?
项目设置:
我使用 Rails 和 esbuild 进行 JavaScript 捆绑,使用 Sass 进行 CSS 预处理。 我的项目的结构是一个 Rails 应用程序,具有通常的目录布局。
采取的步骤:
1.我使用以下命令初始化了我的项目:
rails new app_name -d postgresql -j esbuild --css bootstrap
2.然后我通过运行添加了 esbuild-rails (https://github.com/excid3/esbuild-rails):
yarn add esbuild-rails
3.我在根文件夹中创建了一个esbuild.config.js,内容如下:
const path = require("path");
const rails = require("esbuild-rails");
require("esbuild")
.build({
entryPoints: ["application.js"],
bundle: true,
outdir: path.join(process.cwd(), "app/assets/builds"),
absWorkingDir: path.join(process.cwd(), "app/javascript"),
plugins: [rails()],
})
.catch(() => process.exit(1));
"build": "node esbuild.config.js"
我尝试过的:
Nodemon 默认随 Rails esbuild 一起安装,但我遇到了问题,它以代码 1 退出,而没有触发 CSS 构建过程或包含有关错误的更多信息的日志。
我尝试切换到 chokidar 作为替代文件观察器,但遇到了同样的问题。
我验证了nodemon 和chokidar 的安装,并确保可以从我的项目目录访问它们。
我检查了我的项目配置文件(package.json、esbuild.config.js 等)是否有任何语法错误或拼写错误。
我全局卸载了nodemon,然后在我的项目中本地重新安装它,以确保它使用正确的版本。
我检查了 Node.js 版本、nodemon 和其他依赖项的兼容性,以确保它们兼容。以下是正在使用的版本:
手动运行yarn build:css时,它工作正常,没有任何问题:
yarn build:css
$ yarn run v1.22.22
$ yarn build:css:compile && yarn build:css:prefix
$ sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules
$ postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css
✨ Done in 3.72s.
当前行为:
当运行 ./bin/dev 启动我的 Rails 应用程序时,nodemon 开始监视 .scss 文件中的更改,但以代码 1 退出,而不触发 CSS 构建过程 (yarn build:css)。
预期行为:
我希望 nodemon 能够监视 .scss 文件中的更改,并在发生更改时触发 CSS 构建过程 (yarn build:css),而不会过早退出。
附加信息:
我尝试在脚本中的 nodemon 旁边添加 --verbose 和 --inspect 标志,但仍然没有收到任何错误消息。
12:20:17 web.1 | started with pid 38513
12:20:17 js.1 | started with pid 38514
12:20:17 css.1 | started with pid 38515
12:20:18 js.1 | yarn run v1.22.22
12:20:18 css.1 | yarn run v1.22.22
12:20:18 js.1 | $ node esbuild.config.js --watch
12:20:18 css.1 | $ nodemon --watch ./app/assets/stylesheets/ --ext scss --exec "yarn build:css"
12:20:18 css.1 | [nodemon] 3.1.0
12:20:18 css.1 | [nodemon] to restart at any time, enter `rs`
12:20:18 css.1 | [nodemon] watching path(s): app/assets/stylesheets/**/*
12:20:18 css.1 | [nodemon] watching extensions: scss
12:20:18 css.1 | [nodemon] starting `yarn build:css`
12:20:18 js.1 | Done in 0.55s.
12:20:18 js.1 | exited with code 0
12:20:18 system | sending SIGTERM to all processes
12:20:18 css.1 | exited with code 1
12:20:18 web.1 | terminated by SIGTERM
这是上下文的完整 package.json 文件:
{
"name": "app",
"private": true,
"dependencies": {
"@hotwired/stimulus": "^3.2.2",
"@hotwired/turbo-rails": "^8.0.4",
"@popperjs/core": "^2.11.8",
"autoprefixer": "^10.4.19",
"bootstrap": "^5.3.3",
"bootstrap-icons": "^1.11.3",
"esbuild": "^0.20.2",
"esbuild-rails": "^1.0.7",
"nodemon": "^3.1.0",
"postcss": "^8.4.38",
"postcss-cli": "^11.0.0",
"sass": "^1.75.0"
},
"scripts": {
"build": "node esbuild.config.js",
"build:css:compile": "sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
"build:css:prefix": "postcss ./app/assets/builds/application.css --use=autoprefixer --output=./app/assets/builds/application.css",
"build:css": "yarn build:css:compile && yarn build:css:prefix",
"watch:css": "nodemon --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
},
"browserslist": [
"defaults"
]
}
任何有关如何解决此问题的见解或建议将不胜感激。预先感谢您的帮助!
我的配置与你的有点不同。我使用 esbuild,但我不使用 esbuild-rails 并且我没有任何 esbuild 配置文件。
虽然我严重依赖 foreman 同时启动多个服务。
基本上我用
foreman start -f Procfile.dev -e .env.local
启动我的 Rails 应用程序
我的 procfile.dev 文件如下所示:
web: rails server -p 3004
sidekiq: bundle exec sidekiq
js: yarn build:dev --watch
scss: yarn build:css:application --watch
tailwind: yarn build:css:tailwind --watch
print-pdf: yarn build:css:print-pdf --watch
emails: yarn build:css:emails --watch
minify: yarn build:css:minify --watch
我的 package.json 脚本看起来像:
"scripts": {
"build": "esbuild app/javascript/*.* --bundle --minify --outdir=app/assets/builds && yarn run build:css",
"build:dev": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
"build:css": "yarn run build:css:application && yarn run build:css:minify && yarn run build:css:tailwind && yarn run build:css:print-pdf && yarn run build:css:emails",
"build:css:tailwind": "tailwindcss -i ./app/assets/stylesheets/tailwind.css -o ./app/assets/builds/tailwind.css",
"build:css:application": "yarn run sass ./app/assets/stylesheets/application.scss:./app/assets/builds/application.css",
"build:css:minify": "cleancss -o ./app/assets/builds/application.min.css ./app/assets/builds/application.css",
"build:css:print-pdf": "yarn run sass ./app/assets/stylesheets/print-pdf.scss:./app/assets/builds/print-pdf.css",
"build:css:emails": "yarn run sass ./app/assets/stylesheets/emails.scss:./app/assets/builds/emails.css"
},
我对 Nodemon 不熟悉,但 Foreman 中的生成服务就像一个魅力。
快速检查完nodemon后,您可以尝试以下操作:
"watch:css": "nodemon -L --watch ./app/assets/stylesheets/ --ext scss --exec \"yarn build:css\""
看起来 L 标志告诉它要保持活动状态。虽然我无法确认它是否有效。