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

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(依赖项).

我的问题是,我现在该怎么办？就像默认的bootstrap一样.我如何从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在视图中 运行dev
3 import

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

Answer 2

这应该有效，将此行添加到bootstrap.jsorapp.js文件中。

window.selectize = require('selectize');

或者，如果您只想加载 js，例如

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

应该管用

不要忘记然后做：npm run dev或npm run production

注意：我从未使用过 selectize，所以我无法帮助您调用库...但类似的东西应该加载它。

最后一步 ( npm run dev) 将 selectize 添加到公共文件夹中已编译的 app.js

添加它的 CSS 部分app.scss只需按照给出的示例进行操作。

此外，在这一切之前......你应该运行php artisan preset none/bootstrap/vue并npm install参考文档以获取更多信息：https : //laravel.com/docs/5.6/frontend