php - 如何在 laravel 中导入外部 js 库？

Question

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

我安装了 inputmask带有以下命令的库:

npm install inputmask --save

但是阅读和阅读，我不确定哪个是将相同内容集成到 HTML 页面的正确步骤，我阅读了有关 mix、saas、编译 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 页面，它的正确路径是什么？

Answer 1

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

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

首先在 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');

现在在您的 View 中，您可以按以下方式加载 javascript 文件

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

因此，对于另一个下载的包，您首先使用 npm 安装它，然后在您的 resources/assets/js/app.js 文件中您需要该包。然后 Laravel mix 将负责将所有必需的包组合到一个 javascript 文件中。

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