Laravel + Flatpicker：如何使用 NPM 安装

Question

到目前为止我做了什么

npm i flatpickr --save
将 @import "~flatpickr/dist/flatpickr.css"; 添加到 app.scss
index.blade.php

@section('content')
<div class="form-group">
<label for="loaned">Loaned</label>
<input type="date" class="form-control" name="loaned" id="loaned">
</div>
@endsection

@section('scripts')
    <script>
        flatpickr('#loaned')
    </script>
@endsection

我得到一个错误，“flatpickr 未定义”。我阅读了文档，但我不知道如何处理这部分：

// commonjs
const flatpickr = require("flatpickr");

// es modules are recommended, if available, especially for typescript
import flatpickr from "flatpickr";

Answer 1

在这种情况下，我将以下行添加到 webpack.mix.js

mix.copy('node_modules/flatpickr/dist/flatpickr.css', 'public/css/flatpickr.css');

并以常规方式导入 css 文件。

<link rel="stylesheet" href="/css/flatpickr.css" />

补充：当然你需要运行 npm run dev 如果你使用版本控制，将文件添加到你的 git.

Answer 2

您可以通过以下两种方式之一添加：

在你的app.js（通常在资源文件夹下）：

import flatpckr from 'flatpickr';
window.flatpckr = flatpckr;

这将在您的全局 window object.

中公开 flatpckr 函数

另一种方法是将所有脚本代码添加到脚本文件中，而不是添加到 blade 文件中，例如：

import flatpckr from 'flatpickr';

// Maybe add conditions on when to run this
flatpckr('#loaned');

这样你就不会在不需要的情况下用一堆库“污染”你的 window object。

Answer 3

这对我有用：

npm i flatpickr --save
在resources/js/app.js

flatpickr

require('./bootstrap');
require('alpinejs');
require("flatpickr");

在 resources/css/app.css

flatpickr

@import 'flatpickr/dist/flatpickr.css';

运行 npm run dev 或 npm run watch.

Laravel + Flatpicker：如何使用 NPM 安装

Laravel + Flatpicker: How to Install using NPM

laravel

flatpickr