时间戳

首页 > 解决方案 > 将 NPM javascript 库添加到 Laravel 8

javascript - 将 NPM javascript 库添加到 Laravel 8

问题描述

我正在使用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，添加到bootstrap.js使用window.dayjs = require('dayjs');，通过混合编译，清除所有缓存，仍然出现错误dayjs is not defined。

标签： javascriptlaravelnpmlaravel-8

解决方案

首先，在你的 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>

推荐阅读