如何将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/ ？
我应该手动完成还是有更专业/更清洁的方式？
谢谢帮助。

- William

---

除了我的回答，最简单的方法就是将其保存，手动获取dist文件，并将它们复制到公共文件夹中，然后将其作为资源访问。但是，如果你想真正利用npm和Laravel Webpack Mix的优势，你必须按照文档所说的去做。 - Erubiel

你想把它包含在你的主app.js文件中，还是作为一个独立的文件？ - Rwd

Answer 1

通过观看许多YouTube视频和使用谷歌搜索，我终于找到了我一直在寻找的答案。
以下是步骤：

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- 在视图中 import

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

- William

---

不幸的是，一些模块包含全局内容，因为“require”等“webpack”加载而被取消全局化...这似乎是目前直接包含脚本内容的方法... - jave.web

当您通过 npm run dev 编译代码时，会出现错误。 - Shulz

有些 CSS 文件包含像 PNG、图标等子文件，但这种方式不起作用。 - Jaber Al Nahian

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添加到public文件夹中编译的app.js中

您可以在app.scss中添加CSS部分，只需按照给出的示例进行操作即可。

还有，在这之前......您应该已经运行了php artisan preset none/bootstrap/vue 和 npm install 可以参考文档获取更多信息：https://laravel.com/docs/5.6/frontend

- Erubiel

---

为什么我要将 selectize.js 包含到 bootstrap.js 中呢？我猜是手动方式吧。 - William

我指的是resources/assets/js/bootstrap.js，它是在运行php artisan preset none...或php artisan preset vue...时生成的。我知道这听起来很混乱，但我不是指bootstrap.js bootstrap库文件，我认为你所指的就是它。 - Erubiel

如果您正在启动项目，我建议进行全新安装...步骤如下：1.创建Laravel新项目；2.运行“php artisan preset none”命令；3.执行“npm install”命令；4.按照我的回答修改文件。 - Erubiel

工作了，我使用了 require 但在 app.js 中读到应该在那里包含它。 - William

由于在app.js中调用了./bootstrap.js，因此您可以将其包含在任何地方... - Erubiel

我不知道其他预设如何工作...我只用过Vue...也许其他预设会进行一些不同的脚手架搭建。 - Erubiel