我目前正在尝试使资产与Jquery插件一起使用。
但是我不了解如何使其像以前那样工作。
首先是我的webpack.config.js
var Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/assets/')
.setPublicPath('/assets')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.addEntry('css/bootstrap','./src/Assets/Bootstrap/scss/bootstrap.scss')
.addEntry('js/jquery', './src/Assets/jquery-3.2.1.js')
.addEntry('js/bootstrap', './src/Assets/Bootstrap/dist/js/bootstrap.bundle.js')
.addEntry('js/common', './src/Assets/common.js')
.addEntry('css/backend','./src/Assets/backend.css')
.addEntry('css/admin','./src/Assets/admin.css')
.addEntry('css/frontend','./src/Assets/frontend.css')
.addEntry('css/bfcw','./src/Assets/bfcw.css')
.addEntry('fonts/fa','./src/Assets/FontAwesome/web-fonts-with-css/scss/fontawesome.scss')
.addEntry('fonts/fa-brand','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-brands.scss')
.addEntry('fonts/fa-regular','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-regular.scss')
.addEntry('fonts/fa-solid','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-solid.scss')
.addEntry('fonts/fa-light','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-light.scss')
.addEntry('js/growl', './src/Assets/growl/bootstrap-notify.js')
.enableSassLoader()
.enableSourceMaps(!Encore.isProduction())
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
;
module.exports = Encore.getWebpackConfig();
编译工作没有任何问题。
但是我总是在控制台内收到以下消息
bootstrap.bundle.js:6286 Uncaught ReferenceError: $ is not defined
at Object.<anonymous> (bootstrap.bundle.js:6286)
at Object../src/Assets/Bootstrap/dist/js/bootstrap.bundle.js (bootstrap.js:6377)
at __webpack_require__ (bootstrap edfab3caa025dca10315:19)
at bootstrap edfab3caa025dca10315:62
at bootstrap edfab3caa025dca10315:62
Uncaught ReferenceError: $ is not defined
at list:108
我需要在树枝模板中包含$(function(){....),因为我需要从即时定义的方法中触发一些函数。
我不想将所有内容都放入js文件中,因为某些功能不应公开发布,因为它们专门为管理员保留。
另外我也不想在npm / yarn上包含jquery,因为node_modules文件夹不应该提交到生产环境中,并且它在webroot目录中也不可用。
我需要任何帮助,如有需要,将提供更多详细信息。
最佳答案
在webpack-encore基本模板中,有以下行:
// uncomment for legacy applications that require $/jQuery as a global variable
.autoProvidejQuery()
它将jQuery($)定义为全局变量,以便其他脚本可以使用它。这样,您不必为jQuery添加条目。在这里,我选择了新的webpack.config.js:
var Encore = require('@symfony/webpack-encore');
Encore
.setOutputPath('public/assets/')
.setPublicPath('/assets')
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.autoProvidejQuery()
.addEntry('css/bootstrap','./src/Assets/Bootstrap/scss/bootstrap.scss')
.addEntry('js/bootstrap', './src/Assets/Bootstrap/dist/js/bootstrap.bundle.js')
.addEntry('js/common', './src/Assets/common.js')
.addEntry('css/backend','./src/Assets/backend.css')
.addEntry('css/admin','./src/Assets/admin.css')
.addEntry('css/frontend','./src/Assets/frontend.css')
.addEntry('css/bfcw','./src/Assets/bfcw.css')
.addEntry('fonts/fa','./src/Assets/FontAwesome/web-fonts-with-css/scss/fontawesome.scss')
.addEntry('fonts/fa-brand','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-brands.scss')
.addEntry('fonts/fa-regular','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-regular.scss')
.addEntry('fonts/fa-solid','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-solid.scss')
.addEntry('fonts/fa-light','./src/Assets/FontAwesome/web-fonts-with-css/scss/fa-light.scss')
.addEntry('js/growl', './src/Assets/growl/bootstrap-notify.js')
.enableSassLoader()
.enableSourceMaps(!Encore.isProduction())
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
;
module.exports = Encore.getWebpackConfig();
有关Symfony博客专用文章jQuery and Legacy Applications的更多信息。
关于javascript - 带有jquery插件和WebEncore的Symfony 4,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48251143/