带有 jquery 插件和 WebEncore 的 Symfony 4

Question

我目前正在尝试让资产与 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

我需要在 twig 模板中使用 $(function(){.... 因为我需要从动态定义的方法中触发一些函数。我不想将所有内容都放入 js 文件中，因为某些功能不应公开提供，因为它们专为管理员保留等。

此外，我不想在 npm / yarn 上包含 jquery，因为 node_modules 文件夹不应提交到生产环境中，它也不应该在 webroot 目录中可用.

感谢任何帮助，如果需要，我会提供更多详细信息。

Answer 1

在 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。

Answer 2

多亏了你的帮助，我才得以解开这个谜团。

我将所有内容都移到了主 common.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/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')
        .enableSassLoader()
        .enableSourceMaps(!Encore.isProduction())
        .cleanupOutputBeforeBuild()
        .enableBuildNotifications()
    ;

    module.exports = Encore.getWebpackConfig();

我的 common.js 包括：

    // require jQuery normally
    const $ = require('jquery');
    require('./growl/bootstrap-notify');
    require('./Bootstrap/dist/js/bootstrap.bundle');
    // create global $ and jQuery variables
    global.$ = global.jQuery = $;

这样我也只有一个js文件，有点甜。 webpack 让我有点恼火，但我相信我可以接受它，因为我得到了与背景相关的子系统。非常感谢

Answer 3

您也可以将其用于您的常用文件（css 或 js）：

.
.
.createSharedEntry('common', [
    'jquery',
    'bootstrap',
    'bootstrap-sass/assets/stylesheets/_bootstrap.scss'
])
.
.

然后你会得到 common.js 和 common.css

带有 jquery 插件和 WebEncore 的 Symfony 4

Symfony 4 with jquery plugins and WebEncore

javascript

assets

webpack-encore

symfony4