如何在我的 Laravel 5.5 项目中使用 3rd 方 JavaScript 库？答案

【问题标题】：How to use a 3rd party JavaScript library in my Laravel 5.5 project?如何在我的 Laravel 5.5 项目中使用 3rd 方 JavaScript 库？
【发布时间】：2018-04-03 17:54:51
【问题描述】：

我正在使用 Laravel 5.5 构建一个项目，但我正在努力使用 Laravel Mix 拉入 Bootstrap-DateTimePicker。

到目前为止，我已经运行了以下内容：

npm i eonasdan-bootstrap-datetimepicker
npm install

将以下内容添加到 resources\assets\js\app.js：

require('../../../node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js')

将以下内容添加到 webpack.mix.js：

mix.sass('resources/assets/sass/app.scss', 'public/css')
    .styles('node_modules/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css', 'public/css/bootstrap-datetimepicker.css');

我的视图中有以下内容：

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/bootstrap-datetimepicker.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>

最后我编译了所有内容：

npm run dev

这可行，并允许我使用 datetimepicker，但我确信有更好的方法来做到这一点。

如何在我的项目中正确、干净地使用 bootstrap-datetimepicker 库？

【问题讨论】：

在app.js中，你可以使用更短的版本require('./eonasdan-bootstrap-datetimepicker')
只需在您的公共文件夹中添加 bootstrap-datetimepicker 所需的文件.. 并将链接包含在您的视图中，仅此而已

标签： node.js laravel laravel-5 webpack laravel-mix

【解决方案1】：

follow @ljubadr 方法只需 require('eonasdan-bootstrap-datetimepicker');

如果你不知道你需要哪个名字，你可以去你已经下载的包在这种情况下应该是node_modules/eonasdan-bootstrap-datetimepicker/找到package.json并使用package.json中的name值。

另外请确认包是否支持 webpack，有些包不支持 webpack，那么你需要使用 import loader 来加载库。

【讨论】：

太棒了！我还需要从 webpack.mix.js 中的 node_modules 文件夹中提取样式吗？
是的，我刚刚检查过了。