Closed djkazunoko closed 5 months ago
yarn init -2
実行時のログ
~/Desktop/nijikai-go chore/#69/add-daisyui
❯ corepack enable
~/Desktop/nijikai-go chore/#69/add-daisyui
❯ yarn init -2
Corepack is about to download https://repo.yarnpkg.com/4.1.1/packages/yarnpkg-cli/bin/yarn.js.
Do you want to continue? [Y/n] y
➤ YN0000: · Yarn 4.1.1
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed
➤ YN0000: · Done in 0s 62ms
~/Desktop/nijikai-go chore/#69/add-daisyui
❯ yarn -v
4.1.1
yarn add -D daisyui@latest
実行時のログ
~/Desktop/nijikai-go chore/#69/add-daisyui
❯ yarn add -D daisyui@latest
➤ YN0000: · Yarn 4.1.1
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + daisyui@npm:4.10.2, camelcase-css@npm:2.0.1, css-selector-tokenizer@npm:0.8.0, cssesc@npm:3.0.0, culori@npm:3.3.0, fastparse@npm:1.1.2, picocolors@npm:1.0.0, postcss-js@npm:4.0.1
➤ YN0000: └ Completed in 1s 126ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 8 packages were added to the project (+ 3.88 MiB).
➤ YN0000: └ Completed in 0s 275ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: · Done with warnings in 1s 460ms
nodeLinker: node-modules
を設定してからyarn add -D daisyui@latest
した時のログ
~/Desktop/nijikai-go chore/#69/add-daisyui
❯ yarn add -D daisyui@latest
➤ YN0000: · Yarn 4.1.1
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + daisyui@npm:4.10.3, camelcase-css@npm:2.0.1, css-selector-tokenizer@npm:0.8.0, cssesc@npm:3.0.0, culori@npm:3.3.0, fastparse@npm:1.1.2, picocolors@npm:1.0.0, postcss-js@npm:4.0.1
➤ YN0000: └ Completed in 0s 776ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ A package was added to the project (+ 2.78 MiB).
➤ YN0000: └ Completed in 0s 249ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 0s 258ms
➤ YN0000: · Done in 1s 315ms
yarn v4のzero installは辞めた
yarn install
しても.yarn/cache
ディレクトリが作成されない
.yarn/install-state.gz
なのかと思ったが、https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored にある.yarn/install-state.gz
の説明を読むとどうやら違うっぽい上記のようによくわからない箇所がいくつかあったので慣れているnode_modules
にインストールする形式を選択した。
(そのため上記のよくわからない箇所は調査していない)
cssbundling-railsをbundle installした後に、bin/rails css:install:tailwind
した時のログ
~/Desktop/nijikai-go chore/#69/add-daisyui
❯ bin/rails css:install:tailwind
apply /Users/kazuki/.rbenv/versions/3.3.0/lib/ruby/gems/3.3.0/gems/cssbundling-rails-1.4.0/lib/install/tailwind/install.rb
apply /Users/kazuki/.rbenv/versions/3.3.0/lib/ruby/gems/3.3.0/gems/cssbundling-rails-1.4.0/lib/install/install.rb
Build into app/assets/builds
exist app/assets/builds
identical app/assets/builds/.keep
unchanged app/assets/config/manifest.js
Stop linking stylesheets automatically
gsub app/assets/config/manifest.js
unchanged .gitignore
unchanged .gitignore
Remove app/assets/stylesheets/application.css so build output can take over
remove app/assets/stylesheets/application.css
Default application.html.erb is missing!
Add <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> within the <head> tag in your custom layout.
append Procfile.dev
Add bin/dev to start foreman
conflict bin/dev
Overwrite /Users/kazuki/Desktop/nijikai-go/bin/dev? (enter "h" for help) [Ynaqdhm] Y
force bin/dev
Install Tailwind (+PostCSS w/ autoprefixer)
create tailwind.config.js
conflict app/assets/stylesheets/application.tailwind.css
Overwrite /Users/kazuki/Desktop/nijikai-go/app/assets/stylesheets/application.tailwind.css? (enter "h" for help) [Ynaqdhm] Y
force app/assets/stylesheets/application.tailwind.css
run yarn add tailwindcss@latest postcss@latest autoprefixer@latest from "."
➤ YN0000: · Yarn 4.1.1
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + autoprefixer@npm:10.4.19, postcss@npm:8.4.38, tailwindcss@npm:3.4.3, @alloc/quick-lru@npm:5.2.0, @isaacs/cliui@npm:8.0.2, @jridgewell/gen-mapping@npm:0.3.5, and 165 more.
➤ YN0000: └ Completed in 1s 286ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 129 packages were added to the project (+ 20.88 MiB).
➤ YN0000: └ Completed in 0s 902ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 1s 615ms
➤ YN0000: · Done in 3s 847ms
Add build:css script
Add build:css script
run npm pkg set scripts.build:css="tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify" from "."
run yarn build:css from "."
Browserslist: caniuse-lite is outdated. Please run:
npx update-browserslist-db@latest
Why you should do it regularly: https://github.com/browserslist/update-db#readme
Rebuilding...
warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration
Done in 333ms.
run bundle install
Bundle complete! 32 Gemfile dependencies, 132 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
jsbundling-railsをbundle installした後に、bin/rails javascript:install:esbuild
した時のログ
~/Desktop/nijikai-go chore/#69/add-daisyui*
❯ bin/rails javascript:install:esbuild
apply /Users/kazuki/.rbenv/versions/3.3.0/lib/ruby/gems/3.3.0/gems/jsbundling-rails-1.3.0/lib/install/esbuild/install.rb
apply /Users/kazuki/.rbenv/versions/3.3.0/lib/ruby/gems/3.3.0/gems/jsbundling-rails-1.3.0/lib/install/install.rb
Compile into app/assets/builds
exist app/assets/builds
identical app/assets/builds/.keep
unchanged app/assets/config/manifest.js
unchanged .gitignore
unchanged .gitignore
Default application.html.erb is missing!
Add <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %> within the <head> tag in your custom layout.
Add bin/dev to start foreman
identical bin/dev
apply /Users/kazuki/.rbenv/versions/3.3.0/lib/ruby/gems/3.3.0/gems/jsbundling-rails-1.3.0/lib/install/install_procfile.rb
append Procfile.dev
Install esbuild
run yarn add esbuild from "."
➤ YN0000: · Yarn 4.1.1
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + esbuild@npm:0.20.2, @esbuild/aix-ppc64@npm:0.20.2, @esbuild/android-arm64@npm:0.20.2, @esbuild/android-arm@npm:0.20.2, @esbuild/android-x64@npm:0.20.2, and 19 more.
➤ YN0000: └ Completed in 0s 340ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 2 packages were added to the project (+ 9.86 MiB).
➤ YN0000: └ Completed in 0s 595ms
➤ YN0000: ┌ Link step
➤ YN0007: │ esbuild@npm:0.20.2 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 0s 811ms
➤ YN0000: · Done in 1s 784ms
Add build script
run npm pkg set scripts.build="esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets" from "."
run yarn build from "."
✘ [ERROR] Could not resolve "@hotwired/turbo-rails"
app/javascript/application.js:2:7:
2 │ import "@hotwired/turbo-rails"
╵ ~~~~~~~~~~~~~~~~~~~~~~~
You can mark the path "@hotwired/turbo-rails" as external to exclude it from the bundle, which
will remove this error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "controllers"
app/javascript/application.js:3:7:
3 │ import "controllers"
│ ~~~~~~~~~~~~~
╵ "./controllers"
Use the relative path "./controllers" to reference the file "app/javascript/controllers/index.js".
Without the leading "./", the path "controllers" is being interpreted as a package path instead.
2 errors
node:child_process:929
throw err;
^
Error: Command failed: /Users/kazuki/Desktop/nijikai-go/node_modules/@esbuild/darwin-x64/bin/esbuild app/javascript/application.js --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets
at genericNodeError (node:internal/errors:984:15)
at wrappedFn (node:internal/errors:538:14)
at checkExecSyncError (node:child_process:890:11)
at Object.execFileSync (node:child_process:926:15)
at Object.<anonymous> (/Users/kazuki/Desktop/nijikai-go/node_modules/esbuild/bin/esbuild:221:28)
at Module._compile (node:internal/modules/cjs/loader:1369:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
at Module.load (node:internal/modules/cjs/loader:1206:32)
at Module._load (node:internal/modules/cjs/loader:1022:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12) {
status: 1,
signal: null,
output: [ null, null, null ],
pid: 69216,
stdout: null,
stderr: null
}
Node.js v20.12.2
run bundle install
Bundle complete! 33 Gemfile dependencies, 133 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.
daisyUIを使いたい
↓
rails/tailwindcss-railsではdaisyUIが使えない(CDNのみ可能)
↓
rails/cssbundling-railsとrails/jsbundling-railsでtailwindcssをインストールする必要がある
↓
node.jsとyarn(またはnpm)が必要
↓
「rails/importmap-rails + rails/tailwindcss-rails」の構成から「rails/cssbundling-rails + rails/jsbundling-rails」に変更する
CDN版のdaisyUIを使うことにした。
CDN files are not recommended for production because you can't purge unused styles and file size will be large.
CDN版は非推奨になっているが、これがどれくらい速度に影響するかはデプロイしてみないとわからない。 yarnで入れるとなると「rails/importmap-rails + rails/tailwindcss-rails」の構成から「rails/cssbundling-rails + rails/jsbundling-rails」に変更する必要があり、これに時間をかけたくないので、当面はCDN版で進める。必要になったらやるということで。
daisyUI を導入する