ruby-on-rails 如何在rails 5.1.3 + webpacker上使用jquery

iyfamqjs 于 2023-05-30 发布在 Ruby

关注(0)|答案(3)|浏览(158)

我想使用一个简单的jQuery函数如下：

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

从rails5.1.3应用程序中的单个视图，在本例中是“login.html.erb”
在webpack的application.js中，我有：

var $ = require('jquery');

这使得前面提到的jquery调用工作，如果我把它放在同一个application.js文件，但这将意味着它将被调用的所有页面，因为**<%= javascript_pack_tag 'application' %>**是在布局。
当我尝试在login.html.erb上运行它时，如下所示：

<script type="text/javascript">

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

我在控制台上得到一个错误：“参考错误：$未定义”。
如果我尝试做**”import $ from 'jquery';“**在login.html.erb文件上我得到这个错误：“语法错误：import declarations may only appear at top level of a module”这意味着我的local .erb view不能访问webpacker的application.js中引用的javascript，也不能从那里导入。
我如何从视图中引用jquery以及webpacker提供的任何模块？
如果之前有人问过这个问题，我很抱歉，我在阅读了几天关于webpack，webpacker gem和javascript的文章后没有找到解决方案。
：）

ruby-on-rails

来源：https://stackoverflow.com/questions/46122512/how-to-use-jquery-from-views-on-rails-5-1-3-webpacker

3条答案

按热度按时间

huwehgph1#

1.安装jQuery /bin/yarn add jquery
1.打开config/webpack/shared.js，并使用以下代码添加/覆盖：

module: {
  rules: sync(join(loadersDir, '*.js')).map(loader => require(loader)),

  noParse: function(content) {
    return /jquery/.test(content);
  }
},

plugins: [
  new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
  new ExtractTextPlugin(env.NODE_ENV === 'production' ? '[name]-[hash].css' : '[name].css'),
  new ManifestPlugin({
    publicPath: output.publicPath,
    writeToFileEmit: true
  }),
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": 'jquery',
  }),
],

resolve: {
  extensions: settings.extensions,
  modules: [
    resolve(settings.source_path),
    'node_modules'
  ],

  alias: {
    jquery: 'jquery/dist/jquery.slim.js',
  }
},

您可能需要完整的jQuery，而不是jQuery slim*

1.将jQuery global.$ = require('jquery')导入app/javascripts/packs上的任何js文件
现在你可以用了

$(document).ready(function() {
  //
});

赞(0）回复(0）举报 2023-05-30

lnvxswe22#

先说重要的事你不能用webpacker在脚本标签中转译erb模板中的es6。
自从在rails中引入assets pipeline以来，其总体思想就是交付多个javascript文件的捆绑包。在webpacker之前，通过定义链轮清单，现在使用 Package 。这允许保存js assets文件的http请求。浏览器只会在第一个http请求中加载一个包含所有javascript的文件，并将其缓存以备进一步的页面请求。
因此，您可以为应用程序的各个部分定义单独的js文件，并将所有文件导入application.js包中。只能通过javascript_include_tag包含包文件。你还必须在每个导入的es6模块中导入jquery，因为es6模块有自己的变量作用域。（只需在Chrome开发工具中检查转译的输出）
但是现在，你不能只在body上调用addClass，因为你只希望它发生在登录页面上。一种解决方法是在erb模板中设置一个单独的类（例如“.login”），并将其用作选择器。

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

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

如果faded真的必须添加到body上（模板中没有），你可以尝试通过父匹配器从“.login”类中选择它，或者在rails布局中引入一个变量，该变量是从erb模板中设置的，以便为布局添加控制器特定的标记。
如果你认为这样不会产生太多的http请求，并且速度对你的用户来说足够好，你也可以在每个页面上提供一个单独的js文件。只要把它们都放在packs文件夹中就可以了。

赞(0）回复(0）举报 2023-05-30

camsedfj3#

只要把它放在packs文件夹中的application.js中。