如何解决在常见的Symfony捆绑包上使用webpack
我有一个用于多个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选择初始化被调用了4次,最后我得到了重复的选择字段。
另外,我有来自datepicker的错误消息:
未捕获的TypeError:无法读取未定义的属性“ regional”
我如何改善Webpack的配置? 如果可能的话,我想继续使用完全相同的宏,我无法重构所有其他项目以停止使用它们。
解决方法
因此,我设法更改了块的配置,现在可以更轻松地维护宏 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 %}
供应商/存储块是重复的,但是浏览器不会每次都加载它们,因为它们是同一文件,所以没关系。
这可能不是最干净的解决方案,但可以在我的特定用例中使用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。