如何在Rails Webpacker 3中使用jQuery [英] How to use jQuery with rails webpacker 3

问题描述

我生成了一个新的Rails应用程序: rails new titi --webpack=vue

I generate a new rails app : rails new titi --webpack=vue

，并希望使用jQuery(或其他库，例如popper，vue-resource ...).

and would like to use jQuery (or other libs like popper, vue-resource...).

我尝试了yarn add jquery很好，但是我无法在我的JavaScript代码中访问jQuery.

I tried to yarn add jquerywhich was fine, but I don't have access to jQuery in my JavaScript code.

在以前的Webpacker gem中，有更多的配置文件，我不得不在shared.js中编写它:

In previous Webpacker gem, there was much more conf and I had to write this in shared.js :

module.exports = {
    ...
    plugins: [
      ...
      new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery',
    ]
    ...
    resolve: {
      extensions: settings.extensions,
      modules: [
       resolve(settings.source_path),
        'node_modules'
      ],
      alias: {
        jquery: "jquery/src/jquery",
        vue: "vue/dist/vue.js",
        vue_resource: "vue-resource/dist/vue-resource",
    }
}

在当前Webpacker版本中包括库的最干净的方法是什么? config/webpacker.yml中有东西吗?

What is the cleanest way to include libraries in current Webpacker version ? Something in config/webpacker.yml?

推荐答案

已针对 Webpacker 3.5.0 和 bootstrap@4.1.1

Popper.js和bootstrap@4.0.0来安装JQuery.但是，Bootstrap 4同时需要JQuery和Popper.js，我认为这就是在原始示例中展示它们的目的.另外，我从示例中省略了Vue，因为有足够的文档介绍如何添加Vue连接.

Popper.js and bootstrap@4.0.0 aren't required to install JQuery. However, Bootstrap 4 requires both JQuery and Popper.js, and I assume that is the point of showing them in the original example. Also, I omitted Vue from my example as there is ample documentation on how to add the Vue connections.

要使所有功能正常工作，我通过纱安装了webpack-merge，popper.js，jquery，jquery-ujs和bootstrap@4.1.1.

To get everything to work, I installed webpack-merge, popper.js, jquery, jquery-ujs, and bootstrap@4.1.1 via Yarn.

安装后，我可以使用以下代码更新./config/webpack/environment.js:

Once installed, I was able to update ./config/webpack/environment.js with the following code:

/*
  ./config/webpack/environment.js
  Info for this file can be found
  github.com/rails/webpacker/blob/master/docs/webpack.md
*/

const { environment } = require('@rails/webpacker')
const merge = require('webpack-merge')
const webpack = require('webpack')

// Add an additional plugin of your choosing : ProvidePlugin
environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
    $: 'jquery',
    JQuery: 'jquery',
    jquery: 'jquery',
    'window.Tether': "tether",
    Popper: ['popper.js', 'default'], // for Bootstrap 4
  })
)

const envConfig = module.exports = environment
const aliasConfig = module.exports = {
  resolve: {
    alias: {
      jquery: 'jquery/src/jquery'
    }
  }
}

module.exports = merge(envConfig.toWebpackConfig(), aliasConfig)

现在在environment.js的最后一条语句中使用了envConfig.toWebpackConfig()，我需要将development.js，production.js，test.js更改为以下内容:

Now that envConfig.toWebpackConfig() is used in the last statement in environment.js, I needed to change development.js, production.js, test.js to the following:

const environment = require('./environment')

module.exports = environment

然后在./app/javascript/application.js中，我添加了以下内容:

Then in ./app/javascript/application.js I added the following:

// ./app/javascript/application.js

/* eslint no-console:0 */
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
//
// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
// layout file, like app/views/layouts/application.html.erb

console.log('Hello World from Webpacker')

// JS libraries
import "jquery"
import "jquery-ujs"
import "bootstrap"

为确保未通过资产管道加载JQuery，我在./app/assets/javascripts/application.js中删除了Rails资产连接:

To make sure JQuery wasn't being loaded via the asset pipeline, I removed the Rails assets connection in ./app/assets/javascripts/application.js:

// require rails-ujs
// require_tree .

然后我将这两行添加到./app/views/layouts/application.html.haml的header部分中以显示Webpack内容:

I then added these two lines to the header section in ./app/views/layouts/application.html.haml to display the Webpack content:

= stylesheet_pack_tag 'application'
= javascript_pack_tag 'application' 

在创建static_pages控制器和static_pages#index视图之后，启动Rails服务器(rails s)之后，我能够转到浏览器的JS控制台并运行console.log(jQuery().jquery);来查看是否正在加载JQuery.一切都按预期加载.

After making a static_pages controller and static_pages#index view, after starting the Rails server (rails s), I was able to go to my browser's JS console and run console.log(jQuery().jquery); to see if JQuery was loading. Everything loaded as expected.

文档可在此处找到: https://github.com/rails/webpacker/blob/master/docs/webpack.md

这篇关于如何在Rails Webpacker 3中使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！