如何从 Rails 5.1.3 + webpacker 上的视图中使用 jquery [英] How to use jquery from views on rails 5.1.3 + webpacker

问题描述

我想像这样使用一个简单的 jQuery 函数:

I want to use a simple jQuery function like so:

$( document ).ready(function(){
    $('body').addClass("faded");
  });

来自 rails 5.1.3 应用程序中的单个视图，在本例中为login.html.erb"

From a single view in a rails 5.1.3 app, in this case 'login.html.erb'

在 webpack 的 application.js 上我有:

On webpack's application.js I have:

var $ = require('jquery');

如果我把它放在同一个 application.js 文件中，这使得前面提到的 jquery 调用工作，但这意味着它会被所有页面调用，因为 <%= javascript_pack_tag 'application' %> 在布局上.

which makes the aforementioned jquery call work IF I put it on the same application.js file but this would mean it would be called for all the pages since <%= javascript_pack_tag 'application' %> is on the layout.

当我尝试像这样在 login.html.erb 上运行它时:

When I try to run it on login.html.erb like so:

<script type="text/javascript">

$( document ).ready(function(){
    $('body').addClass("faded");
  });
</script>

我在控制台上收到错误消息:ReferenceError: $ is not defined".

I get an error on console: "ReferenceError: $ is not defined".

如果我尝试在 login.html.erb 文件上执行 " import $ from 'jquery'; "，我会收到此错误:SyntaxError: import 声明可能只出现在一个模块"，这可以理解，这意味着我的本地 .erb 视图无法访问 webpacker 的 application.js 上引用的 javascript，也无法从那里导入它.

If I try to do " import $ from 'jquery'; " on the login.html.erb file I get this error instead: "SyntaxError: import declarations may only appear at top level of a module" which understandably means that my local .erb view doesn't get access to the javascript referenced on webpacker's application.js and cant import it from there.

如何从视图中引用 jquery 以及 webpacker 提供的任何模块?

How can I reference jquery and for that matter any module being served by webpacker, from the views?

如果之前有人问过这个问题，我深表歉意，在阅读了关于 webpack、webpacker gem 和 javascript 的几天后，我在没有找到解决方案的情况下发布了这个问题.

I apologize if this has been asked before, I'm posting this question after days of reading about webpack, the webpacker gem and javascript without finding a solution.

:)

推荐答案

第一件事.您不能使用 webpacker 在脚本标签内的 erb 模板中转译 es6.

First things first. You cannot transpile es6 in erb templates within script tags with webpacker.

自从在 rails 中引入资产管道以来，总体思路是交付多个 javascript 文件的捆绑包.在 webpacker 之前，通过定义链轮清单，现在使用 packs.这允许保存对 js 资产文件的 http 请求.浏览器只加载一个文件，其中包含第一个向应用发出的 http 请求的所有 javascript，并将其缓存以用于进一步的页面请求.

Since introduction of assets pipeline in rails the general idea is to deliver bundles of multiple javascript files. Prior to webpacker by defining sprockets manifests and now with packs. This allows to save http requests for the js assets files. The browser loads only one file with all of the javascript on the first http request to the app and caches it for further page requests.

因此，您可以为应用程序的各个部分定义单独的 js 文件，并在 application.js 包中导入所有文件.只能通过 javascript_include_tag 包含包文件.您还必须在每个导入的 es6 模块中导入 jquery，因为 es6 模块有自己的变量范围.(只需检查 chrome 开发工具中的转译输出)

Thus you can define separate js files for the parts of your application and import the all in the application.js pack. Only pack files can be inlcuded via a javascript_include_tag. You must also import jquery in each imported es6 module, because es6 modules have their own variable scope. (just check the transpiled output in chrome dev tools)

但是现在，你不能只在 body 上调用 addClass，因为你只希望它发生在登录页面上.一种解决方法是在 erb 模板中设置一个单独的类(例如.login")并将其用作选择器.

However now, you can`t just call addClass on body, because you only want it to happen on the login page. One way to solve is setting a separate class (e.g ".login") within the erb template and use it as a selector.

//app/javascript/packs/application.js
import 'startpage'
import 'login'

//app/javascript/src/login/index.js
import $ from 'jquery'
$('.login .content').addClass("faded");

如果确实必须在主体上添加褪色(不在模板中)，您可以尝试通过.login"类中的父匹配器选择它，或者以某种方式在 rails 布局中引入一个变量，该变量设置为在 erb 模板中，以便为布局添加控制器特定标记.

If faded really has to be added on the body (which is not in the template) you can either try select it via parent matcher from the ".login" class or somehow introduce a variable in the rails layout which is set from within an erb template, in order to add controller specific marker for the layout.

Ofc 你也可以每页提供一个单独的 js 文件，如果你认为这不会产生很多 http 请求并且速度对你的用户来说足够好.只需在 packs 文件夹中将它们全部单独打包即可.

Ofc you can also deliver a separate js file per page, if you think that this does not produce to many http requests and the speed is good enough for your users. Just make them all separate packfiles within packs folder.

这篇关于如何从 Rails 5.1.3 + webpacker 上的视图中使用 jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！