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

Question

这个问题可能很愚蠢，但直到现在才找到答案。
我正在尝试从 node_modules 中包含一个库，根据我从昨天开始学到的知识，我们应该像 asset :

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

我想把selectize.js添加到我的项目中所以我使用npm install selectize --save直接安装并保存到 package.json(dependencies).

我的问题是，我现在如何包含它？就像默认 bootstrap 一样。我怎样才能从 node_modules/ 到 public/?
我应该手动完成还是有更多 professional/cleaner 的方法来完成？
谢谢你的帮助。

Answer 1

这应该可以，将此行添加到 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 添加到 public 文件夹

上已编译的 app.js

您在 app.scss 上添加的 CSS 部分只需按照给出的示例即可。

此外，在此之前...您应该运行 php artisan preset none/bootstrap/vue 和 npm install 请参阅文档以获取更多信息：https://laravel.com/docs/5.6/frontend

Answer 2

所以在看了很多 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- 在视图中导入

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

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

How to properly include a library from node_modules into your project?

laravel

npm

assets

node-modules

selectize.js