如何在 laravel 中导入外部 js 库？答案

【问题标题】：How import a external js library in laravel?如何在 laravel 中导入外部 js 库？
【发布时间】：2021-02-23 22:13:24
【问题描述】：

我已经从这个GitHub Repo 下载了一个基于以下仪表板gentella 的基本模板。

我使用以下命令安装inputmask 库：

npm install inputmask --save

但是阅读和阅读，我不确定将相同内容集成到 HTML 页面中的正确步骤是什么，我读到了 mix、saas、Compiling Assets (Laravel Mix)。

我试试这个：

<script type="text/javascript" src="{{ URL::asset('js/inputmaskpath.js') }}"></script>

还有这个：

@section('scripts')
    {{ Html::script(mix('assets/js/inputmask.js')) }}
@endsection

最后的问题是，如何将inputmask 导入我的HTML 页面，正确的路径是什么？

【问题讨论】：

【解决方案1】：

当您使用 npm 下载包时，它们将被下载到 node_modules 文件夹中，并且它们不会（直接）包含/加载到您的项目中。

您使用 Laravel Mix 来处理资产编译。因此，在您的场景中，您可以按以下方式处理它：

首先在resources/assets/js 中创建一个名为app.js 的javascript 文件。添加以下代码即可加载下载的包

require('inputmask');

然后使用 Laravel mix 你可以编译 app.js 为你生成一个 javascript 文件。修改你的 Laravel 根文件夹中的webpack.mix.js 如下

mix.js('./resources/assets/js/app.js', 'public/js/app.js');

现在在您看来，您可以按以下方式加载 javascript 文件

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

所以，如果有另一个下载的包，你首先用 npm 安装它，然后在你的resources/assets/js/app.js 文件中你需要那个包。然后 Laravel mix 会负责将所有需要的包合并到一个 javascript 文件中。

我建议您阅读 this documentation 以了解有关 Laravel Mix 的更多信息。 This tutorial 也很有用。

【讨论】：