将 NPM javascript 库添加到 Laravel 8

Posted 2023-03-14

【中文标题】将 NPM javascript 库添加到 Laravel 8

【英文标题】：Adding NPM javascript library to Laravel 8

【发布时间】：2021-06-02 18:31:35

【问题描述】：

我正在使用 mobiscroll javascript 组件库和我正在构建的新 Laravel 8 应用程序。我使用了试用脚本，只需将缩小后的 css / js 复制到我的 laravel 应用程序的 public/css 和 public/js 目录，然后将脚本 / css 文件推送到布局的 stack 中。

我希望能够通过 npm 安装模块并引用模块来更“本机”地要求这些。在一个反应​​应用程序中，我对此没有任何问题——但它是如何在 laravel 中完成的？

我尝试将window.mobiscroll = require('@mobiscroll/javascript'); 添加到bootstrap.js 文件中，因为这似乎是axios 和_ 库的可用方式，但是当我尝试时我仍然收到Uncaught ReferenceError: mobiscroll is not defined 错误初始化一个组件。

我也尝试将其添加到 app.js 文件中，如下所示：

require('alpinejs');
require('@mobiscroll/javascript');

与以前相同的错误。我正在运行npm run watch，所以mix 进程正在发生并且每次尝试都会成功，所以我认为这不仅仅是缓存或编译的问题。

我在 SO 或 laravel 文档中没有看到任何似乎解决此问题的内容。

编辑：与dayjs 有同样的问题，通过npm i dayjs 添加，使用window.dayjs = require('dayjs'); 添加到bootstrap.js，通过混合编译，清除所有缓存，仍然出现错误dayjs is not defined。

【问题讨论】：

您需要在概念上区分节点使用的库和打包的库，以便将它们用作前端的静态数据。似乎您需要这些库，以便您的项目认为它们仅适用于节点构建过程，而不适用于客户端。您需要查看如何打包第三方依赖项。

laravel.com/docs/5.5/mix#vanilla-js。你会调用mix 方法吗？

【参考方案1】：

首先，在你的 Laravel 根文件夹中安装 Mobiscroll。

npm install @mobiscroll/javascript-lite --save-dev

那你要在合适的地方引用 JS 和 CSS。

在资源/js/bootstrap.js 中。

try 
    window.mobiscroll = require('@mobiscroll/javascript-lite');

    require('bootstrap');
 catch (e) 

在资源/css/app.css中。

@import '~@mobiscroll/javascript-lite/dist/css/mobiscroll.css';

如果你的 webpack.mix.js 是这样的......

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

做一个npm run prod。

确保在 Blade 模板/布局中引用生成的 CSS 文件。

<link type="text/css" rel="stylesheet" href=" mix('css/app.css') ">

同样，对于 JS。

<script src=" mix('js/app.js') " defer></script>

【讨论】：

感谢@karl-hill 的解释和信息！