Symfony4+Webpack Encore环境下Bootstrap Datepicker报错排查

这个错误本质上是jQuery没有被全局暴露，导致bootstrap-datepicker无法将自身方法挂载到jQuery的原型链上，结合你的配置，我给你一步步梳理解决办法：

1. 修复Webpack Encore的jQuery全局暴露配置 #

默认情况下，Webpack Encore会把jQuery作为模块化依赖处理，不会自动挂载到window对象上，但bootstrap-datepicker是依赖全局的$/jQuery变量的。

在你的webpack.config.js里添加autoProvidejQuery()配置：

Encore
  // ... 你的其他配置
  .createSharedEntry('vendors', [
    './assets/js/vendors.js'
  ])
  // 新增这一行，自动把jQuery和$暴露到全局
  .autoProvidejQuery()
;

2. 简化datepicker.js的引用路径（避免相对路径出错） #

你不需要手动写冗长的相对路径引用node_modules里的文件，Webpack会自动从node_modules中查找包，修改你的datepicker.js：

// 加载datepicker核心JS和意大利语语言包
require('bootstrap-datepicker');
require('bootstrap-datepicker/dist/locales/bootstrap-datepicker.it.min');

// 加载datepicker的CSS
require('bootstrap-datepicker/dist/css/bootstrap-datepicker.css');

'use strict';

$(document).ready(function() {
  $('.datepicker').datepicker({
    language: 'it' // 可以加上语言配置，确保意大利语生效
  });
});

3. 确保页面的JS加载顺序正确 #

在使用datepicker的页面模板里，要保证先加载共享的vendors.js，再加载你的datepicker.js对应的入口文件（比如如果datepicker是打包在app.js里，那就先加载vendors，再加载app）：

{# 先加载共享依赖 #}
<script src="{{ asset('build/vendors.js') }}"></script>
{# 再加载包含datepicker的脚本 #}
<script src="{{ asset('build/app.js') }}"></script>

4. 验证依赖包兼容性（可选但建议） #

确保你安装的bootstrap-datepicker是支持Bootstrap4的版本，执行以下命令更新到最新兼容版：

npm install bootstrap-datepicker --save

为什么之前会出错？ #

你之前的配置中，虽然在vendors.js里引入了jQuery，但Webpack把它封装在了模块作用域里，没有暴露到全局window，导致bootstrap-datepicker加载时找不到全局的jQuery对象，也就无法把datepicker方法挂载到$上，最终出现$(...).datepicker is not a function的错误。

内容的提问来源于stack exchange，提问作者Mauro