webpack encore 中的 Jquery 无法在 Windows 操作系统上运行
具有以下配置 webpack.config.js：
Encore
.addEntries({
base_app: './assets/js/entries/_base-app.js',
menu_app: './assets/js/entries/_menu-app.js',
})
.addEntry('index', './assets/js/entries/index.js')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
// uncomment if you're having problems with a jQuery plugin
.autoProvidejQuery()
.autoProvideVariables({
Popper: ['popper.js', 'default'],
})
config webpack_encore.yaml：
webpack_encore:
output_path: '%kernel.project_dir%/public/build'
script_attributes:
defer: false
framework:
assets:
json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'
在资产 _base-app.js 中，我还将 jquery 添加到全局：
// create global $ and jQuery variables
global.$ = global.jQuery = require('jquery');
// core scripts
import 'bootstrap-material-design';
import 'material-dashboard/assets/js/material-dashboard';
import 'select2';
import 'bootstrap-select';
base.html.twig：
<!DOCTYPE html>
<html>
<body>
{% block body %}{% endblock %}
{% block baseScript %}
{{ encore_entry_script_tags('base_app') }}
{% endblock %}
{% block loadScript %}{% endblock %}
</body>
</html>
和 index.html.twig：
{% extends 'base.html.twig' %}
{% block loadScript %}
{{ encore_entry_script_tags('index') }}
{% endblock %}
{% block body %}
<select id="selectpicker" class="selectpicker" data-style="select-with-transition">
<option value="1">1</option>
<option value="2">2</option>
</select>
{% endblock %}
在 Linux 和 iOS 上进行组装期间一切都工作完美，但在 Windows 操作系统上，我在控制台中收到错误：
Uncaught TypeError: n(...).selectpicker is not a function
而且我无法全局访问 jquery：
在 linux 中
$.fn.jquery <-'3.6.0'
Windows 中的“3.6.0”：
$.fn.jquery <- 未捕获（承诺中）TypeError: t(...).selectpicker 不是函数
更新：
package.json：
"dependencies": {
"bootstrap-select": "^1.13.18",
"jquery": "^3.6.0"
}
为什么 jquery 在 Windows 操作系统中不起作用？
Have the following configuration webpack.config.js:
Encore
.addEntries({
base_app: './assets/js/entries/_base-app.js',
menu_app: './assets/js/entries/_menu-app.js',
})
.addEntry('index', './assets/js/entries/index.js')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
// uncomment if you're having problems with a jQuery plugin
.autoProvidejQuery()
.autoProvideVariables({
Popper: ['popper.js', 'default'],
})
config webpack_encore.yaml:
webpack_encore:
output_path: '%kernel.project_dir%/public/build'
script_attributes:
defer: false
framework:
assets:
json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'
in assets _base-app.js i'm also add jquery to global:
// create global $ and jQuery variables
global.$ = global.jQuery = require('jquery');
// core scripts
import 'bootstrap-material-design';
import 'material-dashboard/assets/js/material-dashboard';
import 'select2';
import 'bootstrap-select';
base.html.twig:
<!DOCTYPE html>
<html>
<body>
{% block body %}{% endblock %}
{% block baseScript %}
{{ encore_entry_script_tags('base_app') }}
{% endblock %}
{% block loadScript %}{% endblock %}
</body>
</html>
and index.html.twig:
{% extends 'base.html.twig' %}
{% block loadScript %}
{{ encore_entry_script_tags('index') }}
{% endblock %}
{% block body %}
<select id="selectpicker" class="selectpicker" data-style="select-with-transition">
<option value="1">1</option>
<option value="2">2</option>
</select>
{% endblock %}
During assembly on linux and iOS all work perfectly, but on windows os i'm get error in console:
Uncaught TypeError: n(...).selectpicker is not a function
and also I don't have access to jquery globally:
in linux
$.fn.jquery
<- '3.6.0'
in windows:
$.fn.jquery <- Uncaught (in promise) TypeError: t(...).selectpicker is not a function
UPDATE:
package.json:
"dependencies": {
"bootstrap-select": "^1.13.18",
"jquery": "^3.6.0"
}
Why in windows os jquery doesn't work?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
解决方案包括以下几点：
仅将“select2”和“bootstrap-select”等 jQuery 插件添加到将使用它们的文件中；
在 webpack.config.js 中使用以下“jquery”和“popper”别名：
在这些步骤之后，一切正常。
The solution consists of several points:
Only add jQuery plugins like 'select2' and 'bootstrap-select' to files where they will be used;
In webpack.config.js use the following 'jquery' and 'popper' aliases:
After these steps everything worked.