更新时间:2021-11-14 22:28:11
已针对 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