Question

这个问题可能很愚蠢，但直到现在才找到答案。
我试图包括一个来自 node_modules 的库，从昨天起我学到的东西应该包括在资产中：

{{-- bootstrap 4.1.3 --}} 
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">

我想将 selectize.js 添加到我的项目中，所以我使用了 npm install selectize --save 直接安装并保存到 package.json（依赖性）。

我的问题是，现在如何包括这个？就像默认的引导程序一样。如何从 node_modules / 转到 public / ？
我应该手动执行此操作，还是有更专业/更清洁的方式进行操作？
谢谢您的帮助。

Answer 1

因此，经过大量的youtube视频和Google搜索后，我找到了我想要的答案。
步骤如下：

1-在 webpack.mix.js 中：

mix.scripts([
        'node_modules/bootstrap/dist/js/bootstrap.js',
        'node_modules/selectize/dist/js/selectize.js'
    ],  'public/js/app.js')

    .styles([
        'node_modules/bootstrap/dist/css/bootstrap.css',
        'node_modules/selectize/dist/css/selectize.css',
        'resources/assets/css/app.css'
    ],  'public/css/app.css');

2- npm run dev
3-在视图中导入

<link rel="stylesheet" href="{{asset('css/app.css')}}">  
<script src="{{asset('js/app.js')}}"></script>

Answer 2

这应该可行，将这一行添加到bootstrap.js或app.js文件中。

window.selectize = require('selectize');

或者，如果您只想加载js，则类似

require('selectize/dist/selectize.js');

应该工作

别忘了做一个npm run dev或npm run production

注意：我从未使用过selectize，因此我无法在调用库的过程中为您提供帮助...但是类似的东西应该可以加载它。

最后一步（npm run dev）将selectize添加到公用文件夹上的已编译app.js中

您在app.scss上添加的CSS部分仅遵循给出的示例。

此外，在执行所有操作之前，您应该先运行php artisan preset none/bootstrap/vue和npm install，然后参考文档以获取有关以下内容的更多信息：https://laravel.com/docs/5.6/frontend

如何正确地将node_modules中的库包含到您的项目中？

2 个答案: