如何link巧妙地将私有javascript包含到Rails6中webpacker编译的manifest.json中

Question

我尝试按照 Rails6 的方式为我的应用 link 私有 javascript 代码 jquery。但是，它并没有像 Sprocket 中的 Asset pilplene 那样自动 linked。

实际上只有 application.js 除了 pacs 目录中的其他私有 js 文件在布局视图中被 link 编辑为 "javascript_pack_tag 'application'"。因此，我可以通过 link 手动将 public/packs 目录中编译的私有 javascript 代码放入布局视图中。

*安装JQuery

纱线添加jquery

*app/javascript/packs/application/click_test.js

$(document).ready(function() {
  $('h1').on('click', function() {
    console.log('Wellcome to the World');
    $(this).css('background-color', 'green');
    $(this).css('color', 'white');
  });
});

*config/webpacker.yml

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: false

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []
  .......

*config/webpack/development.js

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

module.exports = environment.toWebpackConfig()

*app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")

*app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>JqueryTest</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

我手动更改代码如下，jquery 可以工作。

<!DOCTYPE html>
<html>
  <head>
    <title>JqueryTest</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <script src="/packs/js/application/click_test-cc5b88be7c8ba2fc22b8.js" data-turbolinks-track="reload">
    </script> 
  </head>

  <body>
    <%= yield %>
  </body>
</html>

*public/packs/manifest.json

{
  "aplication/click_test.js": "/packs/js/aplication/click_test-cc5b88be7c8ba2fc22b8.js",
  "aplication/click_test.js.map": "/packs/js/aplication/click_test-cc5b88be7c8ba2fc22b8.js.map",
  "application.js": "/packs/js/application-678a934fafa8cabf4c10.js",
  "application.js.map": "/packs/js/application-678a934fafa8cabf4c10.js.map",
  "entrypoints": {
    "aplication/click_test": {
      "js": [
        "/packs/js/application/click_test-cc5b88be7c8ba2fc22b8.js"
      ],
      "js.map": [
        "/packs/js/aplication/click_test-cc5b88be7c8ba2fc22b8.js.map"
      ]
    },
    "application": {
      "js": [
        "/packs/js/application-678a934fafa8cabf4c10.js"
      ],
      "js.map": [
        "/packs/js/application-678a934fafa8cabf4c10.js.map"
      ]
    }
  }
}

在 Rails6 中，我想知道 link JQuery 自动像 sprocket 一样智能编码的最佳方法。

感谢提前

Answer 1

新 Rails 6 app/javascript/packs 目录中的文件被视为包的 入口点 。所以你应该把 click-test.js 放在 (say) app/javascript/features 目录并添加到 app/javascript/packs/application.js

import 'features/click-test'

顺便说一句。使用Railsturbolinks时，jQuery初始化代码应该订阅turbolinks:load而不是document:ready

如何link巧妙地将私有javascript包含到Rails6中webpacker编译的manifest.json中

how to link smartly the private javascript included into the manifest.json compiled by webpacker in Rails6

ruby-on-rails-6