如何在rails webpacker 3中使用jQuery

Question

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

并且想使用jQuery(或其他libs,如popper,vue-resource ......).

我尝试过yarn add jquery这很好,但我在JavaScript代码中无法访问jQuery.

在以前的Webpacker gem中,有更多的conf,我不得不写这个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？

Answer 1

更新了Webpacker 3.5.0和bootstrap@4.1.1

Popper.js并且bootstrap@4.0.0不需要安装JQuery.但是,Bootstrap 4需要JQuery和Popper.js,我认为这是在原始示例中显示它们的重点.另外,我从我的例子中省略了Vue,因为有很多关于如何添加Vue连接的文档.

得到的一切工作,我安装webpack-merge,popper.js,jquery,jquery-ujs,和bootstrap@4.1.1经纱.

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

/*
  ./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)

现在,envConfig.toWebpackConfig()在最后一条语句中使用environment.js,我需要改变development.js,production.js,test.js以下几点:

const environment = require('./environment')

module.exports = environment

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

// ./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,我删除了Rails资产连接./app/assets/javascripts/application.js:

// require rails-ujs
// require_tree .

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

= stylesheet_pack_tag 'application'
= javascript_pack_tag 'application' 

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

文档可以在这里找到:https://github.com/rails/webpacker/blob/master/docs/webpack.md

Answer 2

谢谢.这对于gem Webpacker 2来说很好,但新版本的Gem有一个新的文件组织,需要的配置更少.

对于Webpack 3,shared.js似乎不是强制性的.相反,我写了这样的配置config/webpack/environment.js:

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

const webpack = require('webpack')

// Add an ProvidePlugin
environment.plugins.set('Provide',  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    'window.Tether': "tether",
    Popper: ['popper.js', 'default'],
    ActionCable: 'actioncable',
    Vue: 'vue',
    VueResource: 'vue-resource',
  })
)

const config = environment.toWebpackConfig()

config.resolve.alias = {
  jquery: "jquery/src/jquery",
  vue: "vue/dist/vue.js",
  vue_resource: "vue-resource/dist/vue-resource",
}

// export the updated config
module.exports = environment