[英]How to use jQuery with rails webpacker 3
I generate a new rails app : rails new titi --webpack=vue
我生成了一个新的rails应用程序:
rails new titi --webpack=vue
and would like to use jQuery (or other libs like popper, vue-resource...). 并且想使用jQuery(或其他libs,如popper,vue-resource ......)。
I tried to yarn add jquery
which was fine, but I don't have access to jQuery in my JavaScript code. 我试图
yarn add jquery
,这很好,但我无法在我的JavaScript代码中访问jQuery。
In previous Webpacker gem, there was much more conf and I had to write this in shared.js
: 在之前的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",
}
}
What is the cleanest way to include libraries in current Webpacker version ? 在当前Webpacker版本中包含库的最简洁方法是什么? Something in
config/webpacker.yml
? config/webpacker.yml
东西?
Updated for Webpacker 3.5.0 and bootstrap@4.1.1 更新了Webpacker 3.5.0和bootstrap@4.1.1
Popper.js
and bootstrap@4.0.0
aren't required to install JQuery. 安装JQuery不需要
Popper.js
和bootstrap@4.0.0
。 However, Bootstrap 4 requires both JQuery and Popper.js, and I assume that is the point of showing them in the original example. 但是,Bootstrap 4需要JQuery和Popper.js,我认为这是在原始示例中显示它们的重点。 Also, I omitted Vue from my example as there is ample documentation on how to add the Vue connections.
另外,我从我的例子中省略了Vue,因为有很多关于如何添加Vue连接的文档。
To get everything to work, I installed webpack-merge
, popper.js
, jquery
, jquery-ujs
, and bootstrap@4.1.1
via Yarn. 为了让一切顺利,我通过Yarn安装了
webpack-merge
, popper.js
, jquery
, jquery-ujs
和bootstrap@4.1.1
。
Once installed, I was able to update ./config/webpack/environment.js
with the following code: 安装完成后,我可以使用以下代码更新
./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)
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: 既然在
environment.js
的最后一个语句中使用了envConfig.toWebpackConfig()
,我需要将development.js
, production.js
, test.js
更改为以下内容:
const environment = require('./environment')
module.exports = environment
Then in ./app/javascript/application.js
I added the following: 然后在
./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"
To make sure JQuery wasn't being loaded via the asset pipeline, I removed the Rails assets connection in ./app/assets/javascripts/application.js
: 为了确保没有通过资产管道加载JQuery,我删除了
./app/assets/javascripts/application.js
的Rails资产连接:
// require rails-ujs
// require_tree .
I then added these two lines to the header
section in ./app/views/layouts/application.html.haml
to display the Webpack content: 然后我将这两行添加到
./app/views/layouts/application.html.haml
的header
部分以显示Webpack内容:
= stylesheet_pack_tag 'application'
= javascript_pack_tag 'application'
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);
在创建了一个
static_pages
控制器和static_pages#index
视图之后,在启动Rails服务器( rails s
)之后,我可以进入浏览器的JS控制台并运行console.log(jQuery().jquery);
to see if JQuery was loading. 看看JQuery是否正在加载。 Everything loaded as expected.
一切都按预期加载。
Documentation can be found here: https://github.com/rails/webpacker/blob/master/docs/webpack.md 文档可以在这里找到: https : //github.com/rails/webpacker/blob/master/docs/webpack.md
Thanks. 谢谢。 That's fine with gem Webpacker 2, but new version of the Gem has a new organisation for files and requires less config.
这对于gem Webpacker 2来说很好,但新版本的Gem有一个新的文件组织,需要的配置更少。
For Webpack 3, shared.js
doesn't seem to be mandatory. 对于Webpack 3,
shared.js
似乎不是强制性的。 Instead, I wrote the config in config/webpack/environment.js
like this : 相反,我在
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
@sknight answer is nice. @sknight回答很好。 but I add some missing configuration if you have already not include it.
但是如果你还没有包含它,我会添加一些缺失的配置。
application.css
file inside app/javascript/packs/application.css
otherwise you will get the errors like Webpacker can't find application.css in ~/public/packs/manifest.json. Possible causes:
app/javascript/packs/application.css
创建application.css
文件,否则你会得到像Webpacker can't find application.css in ~/public/packs/manifest.json. Possible causes:
这样的错误Webpacker can't find application.css in ~/public/packs/manifest.json. Possible causes:
Webpacker can't find application.css in ~/public/packs/manifest.json. Possible causes:
import "./application.css";
import "./application.css";
in app/javascript/packs/application.js
app/javascript/packs/application.js
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/dist/css/bootstrap.css";
in app/javascript/packs/application.js
to use the bootstrap class in your templates app/javascript/packs/application.js
中使用模板中的bootstrap类
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.