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

安装JQuery不需要

Popper.js和bootstrap@4.0.0。但是，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没有通过资产管道加载，我删除了./app/assets/javascripts/application.js中的Rails资产连接：

// 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控制台并运行{ {1}}看看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

Answer 3

@sknight的答案很好。但如果你还没有包含它，我会添加一些缺失的配置。

在application.css内创建app/javascript/packs/application.css文件，否则您将收到Webpacker can't find application.css in ~/public/packs/manifest.json. Possible causes:
在import "./application.css";

app/javascript/packs/application.js

在import "bootstrap/dist/css/bootstrap.css";中添加app/javascript/packs/application.js以使用模板中的引导类

如何在rails webpacker 3中使用jQuery

3 个答案: