在普通的 Symfony Bundle 上使用 webpack

Question

我有一个用于多个 Symfony 项目的“通用”包。该包包含我们在不同项目中使用的资产（js 和 css）。到目前为止，这个包主要是添加带有允许加载库 cdn 的宏的资产。

{% macro daterangepicker_js() %}
    <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
{% endmacro %}

我们使用宏来只为每个页面加载我们想要的脚本。我们自己管理依赖项。

但我们想开始使用 npm + webpack 来管理 js 库更新（jquery、bootstrap 等...）。所以我在“公共”包上安装了 webpack（而不是在我们不同的项目上）。我还为每个库创建了一个条目（见下面的代码）。为了避免在每个条目中重新导入所有依赖项，我激活了 splitEntryChunks 选项。

现在我的 webpack.config.js 看起来像这样：

Encore
    // directory where compiled assets will be stored
    .setOutputPath('Resources/public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    .setManifestKeyPrefix('bundles/commonbundle')

    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */
    .addEntry('jquery', './assets/jquery.js')
    .addEntry('jquery-datepicker', './assets/jquery-datepicker.js')
    .addEntry('bootstrap', './assets/bootstrap.js')
    .addEntry('bootstrap-select', './assets/bootstrap-select.js')


    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()

    .enableSourceMaps(false)
    .enableVersioning(false)
    .enableSingleRuntimeChunk()
    .autoProvidejQuery()
    .splitEntryChunks()
    .configureSplitChunks(function (splitChunks) {
        // change the configuration
        splitChunks.name = true;
        splitChunks.chunks = 'all';
    })
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

我的树枝宏看起来像这样：

{% macro jquery_js() %}
    <script src="{{ asset('bundles/commonbundle/build/runtime.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~bootstrap~bootstrap-select~jquery~jquery-datepicker.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/jquery.js') }}"></script>
{% endmacro %}

{% macro bootstrap_js() %}
    <script src="{{ asset('bundles/commonbundle/build/runtime.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~bootstrap~bootstrap-select~jquery~jquery-datepicker.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~bootstrap.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/bootstrap.js') }}"></script>
{% endmacro %}

{% macro bootstrapselect_js() %}
    <script src="{{ asset('bundles/commonbundle/build/runtime.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~bootstrap~bootstrap-select~jquery~jquery-datepicker.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~bootstrap-select.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/bootstrap-select.js') }}"></script>
{% endmacro %}

{% macro datepicker_js() %}
    <script src="{{ asset('bundles/commonbundle/build/runtime.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~bootstrap~bootstrap-select~jquery~jquery-datepicker.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~jquery-datepicker.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/jquery-datepicker.js') }}"></script>
{% endmacro %}

我不能使用 {{ encore_entry_script_tags() }} 因为 webpack 没有安装在我们的主应用程序上所以你尝试自己加载块。

真的很丑，连功能都不行

Bootstrap-select 初始化被调用了 4 次，我最终得到了重复的 selection 字段。

此外，我从 datepicker 收到此错误消息：

Uncaught TypeError: Cannot read property 'regional' of undefined

如何改进 webpack 配置？如果可能的话，我想继续使用完全相同的宏，我无法重构所有其他项目以停止使用它们。

Answer 1

所以我设法更改了我的块配置，现在在我的宏中更容易维护 webpack.config.js :

    .enableSingleRuntimeChunk()
    .autoProvidejQuery()
    .splitEntryChunks()
    .configureSplitChunks(function (splitChunks) {
        splitChunks.name = function (module, chunks, cacheGroupKey) {
            const moduleFileName = module.identifier().split(/[\/,\]/).reduceRight(item => item).replace(/\.[^/.]+$/, "");
            return `${cacheGroupKey}~${moduleFileName}`;
        };
        splitChunks.chunks = 'all';
    })

它为每个库创建一个块，然后很容易将它们分成我的宏。

{% macro jquery_js() %}
    <script src="{{ asset('bundles/commonbundle/build/runtime.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~jquery.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/jquery.js') }}"></script>
{% endmacro %}

{% macro bootstrap_js() %}
    <script src="{{ asset('bundles/commonbundle/build/vendors~jquery.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~bootstrap.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/bootstrap.js') }}"></script>
{% endmacro %}

{% macro bootstrapselect_js() %}
    <script src="{{ asset('bundles/commonbundle/build/vendors~jquery.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/vendors~bootstrap-select.js') }}"></script>
    <script src="{{ asset('bundles/commonbundle/build/bootstrap-select.js') }}"></script>
{% endmacro %}

vendors/chunks是重复的，但是浏览器不会每次都加载它们，因为它们是同一个文件，所以没关系。

它可能不是最干净的解决方案，但它适用于我的特定用例。

在普通的 Symfony Bundle 上使用 webpack

Using webpack on a common Symfony Bundle

javascript

php

symfony

webpack

webpack-encore