我正在从Rails 4应用程序中的资产管道迁移到Webpack 2 . 除了在 .js.erb 视图中使用jQuery的JS代码外,一切似乎都能正常工作 .
webpack.config.js的内容如下(省略了指纹识别和压缩的代码):
const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const jsOutputTemplate = 'javascripts/[name].js'
const cssOutputTemplate = 'stylesheets/[name].css'
module.exports = {
context: path.join(__dirname, '/app/assets'),
entry: {
application: ['./javascripts/application.js', './stylesheets/application.scss']
},
output: {
path: path.join(__dirname, '/public'),
filename: jsOutputTemplate
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: ['es2015']
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract(['css-loader', 'resolve-url-loader'])
},
{
test: /\.s(a|c)ss$/,
use: ExtractTextPlugin.extract(['css-loader', 'resolve-url-loader', 'sass-loader?sourceMap'])
},
{
test: /\.(woff2?|svg)$/,
use: 'url-loader?limit=10000&name=/fonts/[name].[ext]'
},
{
test: /\.(ttf|eot)$/,
use: 'file-loader?name=/fonts/[name].[ext]'
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
use: 'url-loader?limit=10000&name=/images/[name].[ext]'
},
{
test: /\.erb$/,
enforce: 'pre',
use: 'rails-erb-loader'
}
]
},
plugins: [
new ExtractTextPlugin({
filename: cssOutputTemplate,
allChunks: true
}),
new webpack.ProvidePlugin({
$: 'jquery',
'$': 'jquery',
'window.$': 'jquery',
jQuery: 'jquery',
'jQuery': 'jquery',
'window.jQuery': 'jquery',
jquery: 'jquery',
'jquery': 'jquery',
'window.jquery': 'jquery'
})
]
}
app / assets / javascripts / application.js中需要jQuery库(以及其他相关的),如下所示:
require('jquery');
require('jquery-ui');
require('jquery-ujs');
require('jquery-datepicker');
正如您所看到的,我已经使用 rails-erb-loader for .erb文件,但它不能像我预期的那样工作 . 呈现.js.erb文件时,我总是在控制台中收到下一个错误:
Uncaught ReferenceError: $ is not defined
这个文件中的代码没什么特别的,只包含一些JS调用jQuery的$函数:
let $messagesArea = $('#js-attachments-messages');
但是,在控制台中,$是在我打印时定义的,即使在.js.erb开头使用调试器:
function $(selector, [startNode]) { [Command Line API] }
我想在webpack.config.js的插件部分定义jQuery:
new webpack.ProvidePlugin({
$: 'jquery',
'$': 'jquery',
'window.$': 'jquery',
jQuery: 'jquery',
'jQuery': 'jquery',
'window.jQuery': 'jquery',
jquery: 'jquery',
'jquery': 'jquery',
'window.jquery': 'jquery'
})
是否有任何配置我没有考虑到?
任何帮助将不胜感激解决此问题 .
UPDATE
package.json的内容如下:
{
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"compression-webpack-plugin": "^0.4.0",
"css-loader": "^0.28.0",
"expose-loader": "^0.7.3",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"imports-loader": "^0.7.1",
"node-sass": "^4.5.2",
"rails-erb-loader": "^5.0.0",
"resolve-url-loader": "^2.0.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.1",
"url-loader": "^0.5.8",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.4"
},
"dependencies": {
// ...
"jquery": "^3.2.1",
"jquery-datepicker": "^1.11.5",
"jquery-ui": "^1.12.1",
"jquery-ujs": "^1.2.2",
// ...
}
}
UPDATE 2
我上传了一个示例应用程序,重现错误尝试删除资源,然后使用jQuery从页面中删除它 .
2 回答
我认为使用expose-loader就足够了,as I proposed in a pull request在上面链接的示例应用中 .
总结一下,
添加
expose-loader
将jQuery公开给全局对象
我最近有一个类似的错误,因为Webpack中所需的jQuery没有在我的应用程序的
view
文件夹中公开,因此在我的js.erb文件中不可见 . 这是通过公开jQuery全局在_1097611中添加以下两行来解决的: