{"id":11006,"date":"2022-08-04T22:14:35","date_gmt":"2022-08-04T14:14:35","guid":{"rendered":"https:\/\/ihower.tw\/blog\/?p=11006"},"modified":"2022-09-29T21:23:36","modified_gmt":"2022-09-29T13:23:36","slug":"rails-%e5%89%8d%e7%ab%af%e6%a1%86%e6%9e%b62022%e7%89%88%e7%b5%84%e5%90%88","status":"publish","type":"post","link":"https:\/\/ihower.tw\/blog\/11006-rails-%e5%89%8d%e7%ab%af%e6%a1%86%e6%9e%b62022%e7%89%88%e7%b5%84%e5%90%88","title":{"rendered":"Rails \u524d\u7aef\u6253\u5305\u5de5\u5177\u7d44\u5408 (2022\u7248)"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p>\u767c\u73fe Rails \u7684\u524d\u7aef\u6253\u5305(build)\u5de5\u5177\u5df2\u7d93\u5230\u4e86\u773c\u82b1\u7e5a\u4e82\u7684\u5730\u6b65\uff0c\u6587\u4ef6\u4e5f\u6c92\u5beb\u5982\u4f55\u642d\u914d\uff0c\u8001\u5c08\u6848\u53c8\u8a72\u4f55\u53bb\u4f55\u5f9e?  \u6211\u505a\u4e86\u4e00\u500b\u6392\u5217\u7d44\u5408\u5206\u6790\u770b\u770b\u3002<\/p>\n\n\n\n<p>\u6703\u6709\u9019\u9ebc\u591a\u60c5\u6cc1\uff0c\u4e3b\u8981\u662f\u56e0\u70ba<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li><a href=\"https:\/\/github.com\/rails\/webpacker\">Webpacker<\/a> \u88ab Rails \u5b98\u65b9 deprecated \u4e86\uff0c\u9019\u500b\u8207 webpack \u6df1\u5ea6\u7d81\u4e00\u8d77\u7684 gem \u53ef\u80fd\u56e0\u70ba\u7dad\u8b77\u6210\u672c\u592a\u9ad8\uff0cRails \u5b98\u65b9\u4e0d\u518d\u7dad\u8b77\u4e86\uff0c\u6b7b\u5728 v6.0.0.rc.6\u3002Webpacker \u7248\u865f\u5927 <a href=\"https:\/\/webpack.js.org\/\">webpack<\/a> \u4e00\u865f\uff0cwebpacker v6 \u662f\u642d\u914d webpack v5\u3002webpacker v5 \u662f\u642d\u914d webpack v4&#8230;<\/li><li><a href=\"https:\/\/github.com\/sass\/sassc-rails\">sassc-rails<\/a> \u63a1\u7528\u7684 <a href=\"https:\/\/sass-lang.com\/libsass\">LibSass<\/a> \u6838\u5fc3\u88ab <a href=\"https:\/\/sass-lang.com\/\">Sass<\/a> \u5b98\u65b9 deprecated \u4e86\uff0c\u5b98\u65b9\u6539\u7528 <a href=\"https:\/\/sass-lang.com\/dart-sass\">Dart<\/a> \u4f86\u5be6\u4f5c\u3002\u6211\u4e0d\u662f Sass \u5c08\u9577\uff0c\u4e0d\u4e86\u89e3\u5347\u7d1a Dart \u7248 SaSS \u662f\u5426\u8981\u7dca\uff0c\u611f\u89ba\u53ef\u4ee5\u62d6\u4e00\u62d6\u7b49\u6709\u9700\u8981\u5347\u7d1a\u518d\u8655\u7406\u3002<\/li><\/ol>\n\n\n\n<p>DHH \u70ba\u4e86\u60f3\u8981\u907f\u514d\u521d\u5b78\u8005\u5b89\u88dd\u548c\u4e86\u89e3 Node.js \u4e16\u754c\uff0c\u6240\u4ee5\u9810\u8a2d\u63d0\u4f9b\u7684\u662f\u4e0d\u9700\u8981\u984d\u5916\u88dd Node.js \u7684 <a href=\"https:\/\/github.com\/rails\/importmap-rails\">importmap<\/a> \u65b9\u6848\uff0c\u4ee5\u53ca\u53e6\u51fa\u4e00\u500b <a href=\"https:\/\/github.com\/rails\/dartsass-rails\">dartsass-rails<\/a> gem \u4f86\u63db\u6210 Dart Sass\u3002<\/p>\n\n\n\n<p>\u4f46\u5982\u679c\u771f\u7684\u8981\u4e0a\u7dda\uff0c\u9084\u662f\u5f97\u63db\u6389 importmap \u6539\u64c1\u62b1 Node.js \u4e16\u754c\u7684 <a href=\"https:\/\/github.com\/rails\/jsbundling-rails\">jsbundling<\/a> \u65b9\u6848\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>CSS \u90e8\u5206<\/td><td>Sass \u90e8\u5206<\/td><td>JS \u90e8\u5206<\/td><td>\u8981\u6c42\u53e6\u5916\u88ddNode.js<\/td><td>\u77ed\u8a55<\/td><\/tr><tr><td>Sprockets<\/td><td>sassc-rails<\/td><td>Sprockets<\/td><td>no<\/td><td>\u50b3\u7d71 Rails \u4f5c\u6cd5\uff0c\u7121\u6cd5\u8655\u7406 Vue.js\/React \u7de8\u8b6f\u9700\u8981<\/td><\/tr><tr><td>Sprockets<\/td><td>sassc-rails<\/td><td>Webpacker<\/td><td>yes<\/td><td>Rails 6 \u6642\u4ee3 DHH \u5efa\u8b70\u7684\u65b9\u6848: css\/image \u7559\u5728 Sprockets\uff0cjs \u6539\u7528 webpack\u3002<\/td><\/tr><tr><td>Webpacker <\/td><td>\u540c\u5de6<\/td><td>\u540c\u5de6<\/td><td>yes<\/td><td>\u4e00\u5ea6\u5f88\u591a\u4eba\u5efa\u8b70\u628a Sprockets \u90fd\u62c6\u4e86\u63db\u6210 Webpacker&#8230; \u73fe\u5728\u53c8\u8981\u9003\u96e3\u4e86<\/td><\/tr><tr><td>Sprockets<\/td><td>sassc-rails<\/td><td>importmap<\/td><td>no<\/td><td>DHH \u7d66\u7684\u65b0 Rails 7 \u9810\u8a2d\u65b9\u6848<\/td><\/tr><tr><td>Sprockets<\/td><td>sassc-rails<\/td><td>jsbundling<\/td><td>yes<\/td><td>\u6211\u76ee\u524d\u7684\u63a8\u85a6\u65b9\u6848<\/td><\/tr><tr><td>Sprockets<\/td><td>sassc-rails + sass-embedded<\/td><td>Sprockets<\/td><td>no<\/td><td>\u7adf\u7136\u6709\u4eba Hack sassc-ruby \u6539\u6838\u5fc3\u7528 dart-sass \uff0c\u770b\u8d77\u4f86\u53ef\u4ee5\u7121\u75db\u5347\u7d1a\u5594<\/td><\/tr><tr><td>Sprockets<\/td><td>sassc-rails + sass-embedded<\/td><td>jsbundling<\/td><td>yes<\/td><td>\u540c\u4e0a\u985e\u4f3c\uff0c\u5982\u679c\u9700\u8981JS\u7de8\u8b6f<\/td><\/tr><tr><td>Sprockets<\/td><td>dartsass-rails<\/td><td>importmap<\/td><td>no<\/td><td>DHH \u7d66\u7684\u5347\u7d1a Dart Sass \u904e\u6e21\u65b9\u6848<\/td><\/tr><tr><td>Sprockets<\/td><td>dartsass-rails<\/td><td>jsbundling<\/td><td>yes<\/td><td>\u540c\u4e0a\u985e\u4f3c\uff0c\u5982\u679c\u9700\u8981JS\u7de8\u8b6f<\/td><\/tr><tr><td>Sprockets<\/td><td>cssbundling <\/td><td>jsbundling<\/td><td>yes<\/td><td>DHH \u767c\u73fe\u9019\u7a2e\u7d44\u5408\u6642\uff0c\u53ef\u4ee5\u628a Sprockets \u63db\u6210\u7cbe\u7c21\u5f8c\u7684 Propshaft<\/td><\/tr><tr><td>Propshaft<\/td><td>dartsass-rails<\/td><td>jsbundling<\/td><td>yes<\/td><td>\u61c9\u8a72\u6c92\u4eba\u9019\u6a23\u7528\uff0cdartsass-rails gem \u60f3\u89e3\u6c7a\u662f Sprockets \u642d\u914d Dart Sass \u7684\u5834\u666f<\/td><\/tr><tr><td>Propshaft<\/td><td>cssbundling<\/td><td>jsbundling<\/td><td>yes<\/td><td>\u9019\u662f DHH \u7d66\u7684 Rails \u524d\u7aef\u7d42\u6975\u65b9\u6848: \u90fd\u5916\u5305\u7d66 Node.js \u7de8\u8b6f\u6253\u5305\uff0c\u6700\u5f8c\u7d66 Propshaft \u6574\u5408\u9032 Rails \u5373\u53ef<\/td><\/tr><tr><td>Propshaft<\/td><td>jsbundling<\/td><td>jsbundling<\/td><td>yes<\/td><td>\u4e0d\u7528 cssbundling\uff0c\u800c\u662f\u900f\u904e jsbundling \u7684 bundle \u5de5\u5177\u4f86\u8655\u7406 css\uff0c\u4f8b\u5982 esbuild \u7684 sass plugin (\u611f\u8b1d <a href=\"https:\/\/twitter.com\/wildjcrt\/status\/1575341661701304320\">Jerry Lee \u5206\u4eab<\/a>)<\/td><\/tr><tr><td>Vite Ruby<\/td><td>\u540c\u5de6<\/td><td>\u540c\u5de6<\/td><td>yes<\/td><td>\u5b8c\u5168\u4e0d\u7528 Rails \u7d66\u7684\u524d\u7aef\u65b9\u6848\uff0c\u5168\u90e8\u6539\u7528 <a href=\"https:\/\/vitejs.dev\/\">Vite<\/a> \u8655\u7406<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u4ee5\u4e0b\u518d\u500b\u5225\u8aaa\u660e\u4e00\u4e0b<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/github.com\/rails\/sprockets\">Sprockets<\/a> \u662f Rails \u6b77\u53f2\u6700\u4e45\u7684\u6253\u5305\u7de8\u8b6f CSS\/JS \u5de5\u5177\uff0c\u800c\u4e14\u6700\u8fd1\u9084\u6709\u5728\u91cb\u51fa\u66f4\u65b0\u3002\u4e0d\u904e\u5728 Node.js \u65b0\u4e16\u754c\u5f8c\uff0c\u5176\u7de8\u8b6f\u529f\u80fd\u8ffd\u4e0d\u4e0a\u9700\u6c42\u4e86\uff0c\u7121\u6cd5\u8655\u7406 React \u548c Vue.js \u9700\u8981\u7684\u7de8\u8b6f\u4efb\u52d9\u3002<\/li><li><a href=\"https:\/\/github.com\/sass\/sassc-rails\">sassc-rails<\/a> gem (\u7b49\u540c\u65bc sass-rails gem \u5169\u8005\u4e00\u6a23)\uff0c\u662f\u642d\u914d Sprockets \u7528\u7684\uff0c\u6838\u5fc3\u662f\u5df2\u88ab deprecated \u7684 <a href=\"https:\/\/sass-lang.com\/libsass\">LibSass<\/a><\/li><li><a href=\"https:\/\/github.com\/rails\/dartsass-rails\">dartsass-rails <\/a>gem\uff0c\u4e5f\u662f\u642d\u914d Sprockets \u7528\u7684\uff0c\u6838\u5fc3\u63db\u6210 <a href=\"https:\/\/sass-lang.com\/dart-sass\">Dart Sass<\/a>\uff0c\u4f46\u6839\u64da\u6587\u4ef6\u6709 Troubleshooting\uff0c\u5347\u7d1a\u6703\u6709\u4e00\u4e9b\u9ebb\u7169\u8981\u8655\u7406<\/li><li><a href=\"https:\/\/github.com\/ntkme\/sassc-embedded-shim-ruby\">sass-embedded<\/a>\uff0c\u7adf\u7136\u6709\u4eba Hack <a href=\"https:\/\/github.com\/sass\/sassc-ruby\/pull\/233\">sassc-ruby<\/a> gem\uff0c\u628a\u88e1\u9762\u7684 LibSass \u63db\u6210 Dart \u7248\u672c&#8230;. \u770b\u8d77\u4f86\u5b8c\u5168\u7121\u75db\u5347\u7d1a\uff0c\u6bd4\u7528 dartsass-rails \u9084\u7c21\u55ae<\/li><li><a href=\"https:\/\/github.com\/rails\/importmap-rails\">Importmap<\/a> \u662f Rails \u76f4\u63a5\u5229\u7528\u700f\u89bd\u5668\u7684 JavaScript modules \u529f\u80fd\uff0c\u56e0\u6b64\u5c31\u4e0d\u9700\u8981\u8655\u7406 JS \u7de8\u8b6f\u4e86\u3002\u4e0d\u904e\u56e0\u70ba<a href=\"https:\/\/caniuse.com\/import-maps\">\u700f\u89bd\u5668\u652f\u63f4<\/a>\u9084\u4e0d\u597d\u95dc\u4fc2\uff0c\u61c9\u8a72\u9084\u4e0d\u80fd\u771f\u7684\u62ff\u4f86\u4e0a Production \u4f7f\u7528\uff0c\u4e5f\u67e5\u5230 <a href=\"https:\/\/github.com\/guybedford\/es-module-shims\">ES Module Shims <\/a>polyfill \u53ef\u4ee5\u8a66\u8a66\u770b\u3002<\/li><li><a href=\"https:\/\/github.com\/rails\/cssbundling-rails\">cssbundling-rails<\/a> \u548c <a href=\"https:\/\/github.com\/rails\/jsbundling-rails\">jsbundling-rails<\/a> \u90fd\u662f\u628a\u7de8\u8b6f\u6253\u5305\u4efb\u52d9\uff0c\u5168\u90fd\u4ea4\u7d66 Node.js \u4e16\u754c\u8655\u7406\uff0c\u6700\u5f8c\u4e1f\u51fa\u4e00\u500b build \u597d\u7684\u6a94\u6848\u7d66 Asset Pipeline (Sprockets\u6216Propshaft) \u6574\u5408\u9032 Rails\u3002<ul><li>jsbundling \u53ef\u4ee5\u642d\u914d <a href=\"http:\/\/github\">esbuild<\/a>, <a href=\"https:\/\/webpack.js.org\/\">webpack<\/a> \u6216 <a href=\"https:\/\/rollupjs.org\/guide\/en\/\">rollup.js<\/a> <\/li><\/ul><\/li><li><a href=\"https:\/\/github.com\/rails\/propshaft\">Propshaft<\/a> \u662f\u500b\u967d\u6625\u7cbe\u7c21\u7248\u7684 Sprockets\uff0c\u6c92\u6709\u7de8\u8b6f\u548c\u6253\u5305 css\/js \u7684\u529f\u80fd\uff0c\u53ea\u5269\u4e0b\u6700\u57fa\u672c\u548c Rails \u6574\u5408\u7684\u4efb\u52d9\u3002\u56e0\u70ba\u7de8\u8b6f\u548c\u6253\u5305\u90fd\u900f\u904e cssbundling-rails \u548c jsbundling-rails \u8655\u7406\u5b8c\u4e86\u3002<\/li><\/ul>\n\n\n\n<p>\u6211\u7684\u60f3\u6cd5:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u73fe\u968e\u6bb5 Sprockets \u7e7c\u7e8c\u7528\uff0c\u6709\u7528 Vue.js\/React \u5c31\u518d\u642d\u914d jsbundling-rails + esbuild \u8655\u7406<\/li><li>\u4e4b\u524d\u7684 Webpacker code \u5f97\u62c6\u9664\uff0c\u9019\u6b7b\u8def\u4e86\u3002\u5f97\u6539\u6210\u7528  jsbundling-rails + esbuild \u8655\u7406<\/li><li>\u82e5\u6709\u9700\u8981\u5347\u7d1a Dart Sass\uff0c\u6211\u6703\u5617\u8a66\u7528 <a href=\"https:\/\/github.com\/ntkme\/sassc-embedded-shim-ruby\">sass-embedded<\/a> \u770b\u770b\uff0c\u4e0d\u884c\u518d\u8a66 dartsass-rails gem\u3002\u771f\u4e0d\u884c\u6709\u9700\u8981\u518d\u5168\u9762\u63db cssbundling-rails \u4ee5\u53ca Sprockets \u53ef\u63db\u6210 Propshaft (\u4ee5\u4e0a\u9077\u79fb\u6210\u672c\u7531\u5c0f\u5230\u5927)<\/li><li><a href=\"https:\/\/vite-ruby.netlify.app\/\">Vite Ruby<\/a> \u883b\u6709\u8da3\u7684\uff0cVue.js \u793e\u7fa4\u51fa\u7684 <a href=\"https:\/\/vitejs.dev\/\">Vite<\/a> \u5de5\u5177\u5f88\u53b2\u5bb3\u3002\u4f46\u9019\u4e5f\u7b49\u65bc\u90fd\u4e0d\u7528 Rails \u63d0\u4f9b\u7684\u524d\u7aef\u65b9\u6848\u4e86\uff0c\u4e5f\u4e0d\u6e05\u695a Vite Ruby \u662f\u5426\u8d70\u7684\u9577\u9060\u3002\u9019\u53ef\u80fd\u6bd4\u8f03\u9069\u5408\u91cd\u5ea6\u524d\u7aef\u958b\u767c\uff0c\u6709\u5c08\u5c6c F2E \u7684 Rails \u5718\u968a\u4f7f\u7528\u3002<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u767c\u73fe Rails \u7684\u524d\u7aef\u6253\u5305(build)\u5de5\u5177\u5df2\u7d93\u5230\u4e86\u773c\u82b1\u7e5a\u4e82\u7684\u5730\u6b65\uff0c\u6587\u4ef6\u4e5f\u6c92\u5beb\u5982\u4f55\u642d\u914d\uff0c\u8001\u5c08\u6848\u53c8\u8a72\u4f55\u53bb\u4f55\u5f9e? &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/ihower.tw\/blog\/11006-rails-%e5%89%8d%e7%ab%af%e6%a1%86%e6%9e%b62022%e7%89%88%e7%b5%84%e5%90%88\" class=\"more-link\">\u95b1\u8b80\u5168\u6587<span class=\"screen-reader-text\">\u3008Rails \u524d\u7aef\u6253\u5305\u5de5\u5177\u7d44\u5408 (2022\u7248)\u3009<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[53],"tags":[],"class_list":["post-11006","post","type-post","status-publish","format-standard","hentry","category-rails","entry"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1q6tG-2Rw","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/ihower.tw\/blog\/wp-json\/wp\/v2\/posts\/11006","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ihower.tw\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ihower.tw\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ihower.tw\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ihower.tw\/blog\/wp-json\/wp\/v2\/comments?post=11006"}],"version-history":[{"count":70,"href":"https:\/\/ihower.tw\/blog\/wp-json\/wp\/v2\/posts\/11006\/revisions"}],"predecessor-version":[{"id":11249,"href":"https:\/\/ihower.tw\/blog\/wp-json\/wp\/v2\/posts\/11006\/revisions\/11249"}],"wp:attachment":[{"href":"https:\/\/ihower.tw\/blog\/wp-json\/wp\/v2\/media?parent=11006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ihower.tw\/blog\/wp-json\/wp\/v2\/categories?post=11006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ihower.tw\/blog\/wp-json\/wp\/v2\/tags?post=11006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}