如何在Laravel中正确添加Javascript依赖项和CSS文件

Question

我正在使用Laravel 7构建我的应用程序之一。我具有以下Javascript依赖项。

1. 引导程序
2. 数据表
3. jQuery
4. 选择2
5. 吐司
6. D3

现在我正在使用新的laravel/ui程序包，并已搭建了一个基于Bootstrap的应用程序。它使用Laravel Mix并编译了app.css和app.js文件。 app.js具有以下代码：

require('./bootstrap');

引导文件具有以下代码：

window._ = require('lodash');

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}


window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

我认为在此文件中，我们需要添加其他依赖项。在文档中还说要在此处添加Javascript依赖项。我对如何向文件添加DataTables和其他上述依赖项感到困惑。我需要在require中使用哪些软件包名称？

而且，大多数这些软件包也都有自己的CSS文件。如何为bootstrap.js这样的文件中的所有依赖项添加CSS文件？当前，所有CSS文件都已导入到应用布局刀片模板中。如果有人可以添加教程链接，那也很棒。

Answer 1

要在laravel项目中安装JavaScript程序包，您可以cad执行此操作，示例数据表：

1. 安装npm软件包

   npm install --save datatables.net-bs4

2. 将其包括在resources/js/bootstrap.js中包括它

require（'datatables.net-bs4'）;

3. 包含在resources/sass/app.scss中

@ import'〜datatables.net-bs4 / css / dataTables.bootstrap4.css';

4. 在终端中运行npm run dev以编译必要的文件

最后创建一个js文件，并将其包含在您的bootstrap.js文件中并使用软件包

<script>
$(document).ready(function () {
  $('table').DataTable();
});
 </script>

不要忘记检查您的webpack.mix.js文件

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

并将您的可编译js和CSS文件包括在模板中

  <link href="{{ mix('css/app.css') }}" rel="stylesheet">

<script src="{{ mix('js/app.js') }}"></script>

我希望能为您和对不起，我的英语不好