ruby-on-rails 如何获取js:yarn build --watch working in myProcfile.devin a new rails 7 project?

khbbv19g  于 2023-04-08  发布在  Ruby
关注(0)|答案(1)|浏览(78)

我创建了我的新rails7.0.3项目

rails new my_app_name --css tailwind --database=postgresql

注意到当我运行bin/dev时JS不工作。Procfile.dev

js: yarn build --watch

得到一个错误,说我缺少一个package.json文件,所以我做了

npm init --yes and npm install

相反,我得到了这个错误

error Command "build" not found.

我发现了这篇文章,但我仍然无法找出如何为我修复它https://stackoverflow.com/a/72535848/15885731
从那个帖子开始,我试着跑步

./bin/bundle add jsbundling-rails
./bin/rails javascript:install:[esbuild|rollup|webpack]

但我得到这个错误

zsh: bad pattern: javascript:install:[esbuild
zsh: command not found: rollup
zsh: command not found: webpack]

gem jsbundling-rails的文档说

"You can configure your bundler options in the build:css script in package.json or via the installer-generated tailwind.config.js for Tailwind"

我有一个tailwind.config.js文件,但不知道如何处理它。

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
  ]
}

我用前面的命令创建的package.json不包含任何脚本

"scripts": {
},

你知道我该怎么解决吗?
编辑:我最终制作了一个新的应用程序“rails new my_app_name --css tailwind --database=postgresql -j esbuild”,它从一开始就运行得很完美。

am46iovg

am46iovg1#

尝试将类似这样的内容添加到package.json

"scripts": {
    "type": "module",
    "build": "yarn build:css && yarn build:js",
    "build:css": "yarn build:css:application",
    "build:css:application": "tailwindcss -i app/assets/stylesheets/application.tailwind.css -o app/assets/builds/application.css -c config/tailwind.config.js --postcss postcss.config.js --minify",
    "build:js": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --loader:.png=binary --loader:.svg=binary",
    "failure:js": "rm ./app/assets/builds/application.js && rm ./app/assets/builds/application.js.map",
    "dev": "tsc-watch --noClear -p tsconfig.json --onSuccess \"yarn build:js\" --onFailure \"yarn failure:js\""
  }

对我来说很好

相关问题