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

Question

我已根据以下仪表板gentella从此GitHub Repo下载了一个基本模板.

我使用以下命令安装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页面以及它是什么正确的路径？

Answer 1

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

您使用Laravel Mix来处理资产编译.因此,在您的方案中,您可以按以下方式处理它:

首先在resources/assets/js调用中创建一个javascript文件app.js.添加以下代码以便能够加载下载的包

require('inputmask');

然后使用Laravel mix你可以编译app.js为你生成一个javasciript文件.webpack.mix.js在Laravel根文件夹中修改为以下内容

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文件.

我建议您阅读本文档以获取有关Laravel Mix的更多信息.本教程也很有用.