如何在 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');

1. 包含在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>

希望能帮助到你 对不起我的英语不好