时间戳

首页 > 解决方案 > 如何巧妙地链接包含在 Rails6 中 webpacker 编译的 manifest.json 中的私有 javascript

ruby-on-rails-6 - 如何巧妙地链接包含在 Rails6 中 webpacker 编译的 manifest.json 中的私有 javascript

问题描述

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

实际上，除了 pacs 目录中的其他私有 js 文件外，只有 application.js 与布局视图中的“javascript_pack_tag 'application'”链接。因此，我可以通过手动将 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 中，我想知道像 sprocket 一样智能地自动链接 JQuery 代码的最佳方法。

感谢提前

标签： ruby-on-rails-6

解决方案

Rails 6 的新app/javascript/packs目录中的文件被视为包的入口点。所以你应该放入click-test.js（比如说） app/javascript/features目录并添加到app/javascript/packs/application.js

import 'features/click-test'

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

推荐阅读