Question

我认为这很简单。

我有一个Symfony 4应用程序，带有Webpack / Encore。

我已经安装了bootstrap 4，一切正常;我正在尝试安装bootstrap-datepicker。

所以，我创建了一个名为checkmat(n,n,mat,&max,&min);的文件，这里是内容：

datepicker.js

JQuery和Bootstrap由另一个名为// js require('bootstrap-datepicker'); require('../../../node_modules/bootstrap-datepicker/dist/locales/bootstrap-datepicker.it.min'); // css require('../../../node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.css'); 'use strict'; $(document).ready(function() { $('.datepicker').datepicker({ }); });的文件提供：

vendors.js

// js require('jquery'); require('bootstrap'); // scss require('../scss/vendors.scss');是一个共享条目。以下是我的vendors.js文件的一部分：

webpack.config.js

在我要使用datepicker的页面上，我有一个经典错误：

Encore
    ...

    // shared entries
    .createSharedEntry('vendors', [
        './assets/js/vendors.js'
    ])

    ...

为什么我错了？

Answer 1

我遇到了同样的问题，发现bootstrap-datepicker可能出了什么问题。

就我而言，我发现该库使用的jQuery实例是其package.json文件中所需要的实例。因此，它从未导入到我的项目jQuery实例中，因此在尝试创建日期选择器时我遇到了TypeError: $(...).datepicker is not a function。

我在此bootstrap-datepicker issue中发现了更多信息，该信息指出在1.7.0版本中，jQuery依赖项被标记为peerDependency。在其他版本中，它是dependency，显然此实例用于库而不是项目的实例。

我试图在我的项目中添加此版本：

yarn add bootstrap-datepicker@1.7.0

在那之后，它就像一个魅力。但是我不能停留在旧版本上。

幸运的是，我找到了一个有关avoiding multiple versions of jQuery的主题，解决方案是强制特定软件包的依赖版本：

{
"dependencies": {
    "bootstrap-datepicker": "1.8.0",
    "jquery": "2.2.4",
  },
  "resolutions": {
    "bootstrap-datepicker/jquery": "2.2.4"
  }
}

通过此配置，bootstrap-datepicker与项目的其余部分使用相同的jQuery实例，并且可以按预期创建日期选择器。

Answer 2

不知道您是否已解决问题。假设您的文件系统是这样组织的（就我而言）：

Root/
  assets/
    css/
      app.scss
    js/
      app.js

这是我所做的：

首先我已经安装了bootstrap datepicker：

npm i bootstrap-datepicker-webpack

此软件包是建议的软件包，但就我而言，它带来了一些问题，所以我确实像Edhrendal一样：

yarn add bootstrap-datepicker@1.7.0

我检查了node_modules文件夹中的库，并且同时拥有bootstrap-datepicker和bootstrap-datepicker-webpack。

在此阶段，对于样式，我通过添加来编辑app.scss

@import "~bootstrap-datepicker/dist/css/bootstrap-datepicker3";

和app.js

require("bootstrap-datepicker");
$('.datepicker').datepicker({
  format: 'dd/mm/yyyy'
});

注意：require（“ bootstrap-datepicker-webpack”）无效。

然后我跑了：

yarn run encore dev

它奏效了。

Answer 3

您需要安装 Jquery-ui ，它是一个依赖项，我将向您展示一个示例。

require('webpack-jquery-ui/datepicker');
require("bootstrap-datepicker/js/bootstrap-datepicker.js");
require("bootstrap-datepicker/dist/css/bootstrap-datepicker.css");

    $(document).ready(function () {
      $("#datepicker").each(function () {
        $(this).datepicker({});
      });
    });

对我有用，希望能帮到你。

Answer 4

在您提供的代码示例中，似乎没有包含您创建的“ datepicker.js ”：在您的“ vendor.js ”中，您应 require（“ ./ whatever-path / datepicker.js”）; 与Bootstrap和jQuery一样。

Encore和Symfony4的Bootstrap datepicker

4 个答案: