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

【问题标题】：How to properly include a library from node_modules into your project?如何正确地将 node_modules 中的库包含到您的项目中？
【发布时间】：2019-01-25 21:16:01
【问题描述】：

这个问题可能很愚蠢，但直到现在才找到答案。
我正在尝试包含一个来自 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(依赖项）。

我的问题是，我现在如何包含它？就像默认引导程序一样。如何从 node_modules/ 转到 public/？
我应该手动完成还是有更专业/更清洁的方式来完成？
谢谢你的帮助。

【问题讨论】：

除了我的回答之外，最简单的方法就是保存它，手动获取 dist 文件并将它们复制到您的公用文件夹中，然后将它们作为资产访问。但是要真正利用 npm 和 laravel webpack 组合......你必须按照文档所说的那样做。
您想将它包含在您的主 app.js 文件中还是将其作为独立文件？

标签： laravel npm assets node-modules selectize.js

【解决方案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>

【讨论】：

遗憾的是，一些模块包含由于“require”等而未全球化的全局内容。“webpack”加载......这似乎是“按原样”包含脚本内容的直接方式现在...
通过npm run dev编译代码会报错
有些css文件包含了png、icons等子文件，这样就不行了

【解决方案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

【讨论】：

为什么我要在 bootstrap.js 中包含 selectize.js？我猜我是手动的。
通过 bootstrap.js 我指的是当您运行 php artisan preset none... 或 php artisan preset vue... 时生成的 resources/assets/js/bootstrap.js... 我知道这听起来令人困惑，我不是指 bootstrap.js 引导库文件，我认为这就是你所指的
如果您正在启动您的项目，我建议您全新安装... 步骤是，1 laravel new project 2 php artisan preset none，3 npm install，4 按照我在回答
工作，我确实需要，但在 app.js 中，读到你应该包括在那里。
你可以将它包含在任何人身上...因为 ./bootstrap.js 在 app.js 中被调用...