如何在 Symfony 上“安装”Bootstrap Datetimepicker？答案

【问题标题】：How to "install" Bootstrap Datetimepicker on Symfony?如何在 Symfony 上“安装”Bootstrap Datetimepicker？
【发布时间】：2019-12-14 13:24:57
【问题描述】：

我有 assets/css/bootstrap-4.3.1.css 和 assets/js/bootstrap-4.3.1.js 之类的文件，webpack.config 我有

.addEntry('js/bootstrap','./assets/js/bootstrap-4.3.1.js')

和

.addStyleEntry('css/bootstrap', './assets/css/bootstrap-4.3.1.css')

我分别需要bootstrap-3.3.1.js 和bootstrap-3.3.1.css。

我需要在 yarn 中安装这些，以确保我具备 Bootstrap datetimepicker 的先决条件。尝试过

yarn add bootstrap@3.3.1

没有任何运气。然后我尝试将文件分别手动下载到 assets/css 和 assets/js 中，然后再次运行上面的命令，没有任何运气。所以，我需要使用yarn来改变Bootstrap的版本。然后，我还需要使用 Bootstrap datetimepicker。我怎样才能实现我的目标？与使用 yarn 相比，此时手动链接 css 和 js 文件对我来说似乎非常极端，但很可能原因只是我对 yarn 缺乏了解。

编辑

此时我已经

package.json

//...
"depencencies": {
    //...
    "bootstrap": "^3.3.1",
    //...
}
//...

app.js

//...
require("bootstrap");
//...

运行yarn install时的错误信息：

未找到此依赖项：

./assets/js/app.js 中的引导程序

要安装它，你可以运行：npm install --save bootstrap

【问题讨论】：

@msg 在这种情况下会有什么影响？我想你的建议是添加这一行，然后运行 yarn install。对吗？
@msg 到目前为止感谢您的 cmets，但是，对这些事情知之甚少，我仍然不清楚。我想要 bootstrap-3.3.1。通过创建一行说 require('bootstrap') 它将如何知道我的偏好版本？ app.js 已经有一行，说 import "bootstrap";。知道这些我应该把 require('bootstrap') 放在文件中的什么地方吗？是冷漠吗？
@msg 我无法让它工作，显然，我不知道纱线是如何工作的，也没有找到可以简单地解释它应该如何使用的来源。我想我会手动链接css和js，据我所知它比yarn更有效。
@msg Symfony 文档在这里没有给我关于版本的任何线索：symfony.com/doc/current/frontend/encore/bootstrap.html
@msg 我已经编辑了我的问题。我已经完成了 yarn add bootstrap@3.3.1，我添加了 require('bootstrap')，但它找不到它。我什至下载了 bootstrap 3.3.1.zip 并尝试添加它，但由于纱线错误，即使在转换为 tar.gz 之后也没有成功。它有一个解决方案 (github.com/yarnpkg/yarn/pull/509/files) 但我们真的需要开始开发 yarn 以便通过 yarn 安装 Bootstrap datetimepicker？

标签： symfony twitter-bootstrap-3 yarnpkg bootstrap-datetimepicker

【解决方案1】：

过程很简单

向 formType 字段添加类

'attr' => ['class' => 'js-datepicker'],

用 yarn 安装 datepicker 的 JQuery 插件
```
yarn add bootstrap-datepicker
```
在 assets/js 中创建一个文件用于 datepicker 配置

在 webpack 中添加 encore 条目

 .addEntry('datepicker', [
    './assets/js/datepicker.js'
])

在模板中添加入口链接标签

{% block stylesheet %}
{{ encore_entry_link_tags('datepicker') }}
{% endblock %}

在模板中添加入口脚本标签

{% block javascripts %}
{{ encore_entry_script_tags('datepicker') }}
{% endblock %}

【讨论】：