web-dev-qa-db-ja.com

Rails webpacker 3でjQueryを使用する方法

新しいRails app：Rails new titi --webpack=vueを生成します

jQuery（または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に何かありますか？

jqueryruby-on-railswebpacker
11
Kikan

Webpacker 3.5.0および[email protected]用に更新

__QueryをインストールするのにPopper.jsと[email protected]は必要ありません。ただし、Bootstrap 4にはJQueryとPopper.jsの両方が必要であり、元の例でJQueryとPopper.jsを表示するポイントであると想定しています。また、Vue Vue接続を追加する方法に関する豊富なドキュメントがあるので、私の例から。

すべてを機能させるために、Yarnを使用してwebpack-merge、popper.js、jquery、jquery-ujs、および[email protected]をインストールしました。

インストールしたら、次のコードで./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 .

次に、./app/views/layouts/application.html.hamlのheaderセクションに次の2行を追加して、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

17
sknight

ありがとう。 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
13
Kikan

@sknightの答えはいいです。まだ含まれていない場合は、不足している構成をいくつか追加します。

  1. 作成application.cssファイルapp/javascript/packs/application.cssそれ以外の場合は、Webpacker can't find application.css in ~/public/packs/manifest.json. Possible causes:
  2. 追加 import "./application.css"; in app/javascript/packs/application.js
  3. 追加 import "bootstrap/dist/css/bootstrap.css"; in app/javascript/packs/application.jsは、テンプレートでbootstrapクラスを使用します
0
Shajid