无法使用 Laravel Mix 导入 Video.js答案

【问题标题】：Cannot get Video.js to import using Laravel Mix无法使用 Laravel Mix 导入 Video.js
【发布时间】：2023-03-28 02:49:01
【问题描述】：

我已经使用 npm 下载了 Video.js，但我无法将其导入以在前端使用它。以下是我采取的步骤：

使用 npm 安装 Video.js，并创建 /node_modules 目录。
将代码添加到文件开头的webpack.mix.js。

webpack.mix.js

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

mix.webpackConfig({
    resolve: {
        alias: {
            'videojs': path.resolve(__dirname, 'node_modules/video.js/dist/video.min.js'),
        }
    }
});

成功运行npm run dev。
添加以下代码以查看play.blade.php：

play.blade.php

 <script type="module">
    import 'videojs';

    videojs('my-player');
    </script>

我收到此错误未捕获的类型错误：无法解析模块说明符“videojs”。相对引用必须以“/”、“./”或“../”开头。

为什么我使用别名时它在搜索路径？

我已经尝试了很多让包导入的变体，但都没有成功，被卡住了 2 天。我该如何解决这个问题？我想在视图中使用 video.js。

【问题讨论】：

标签： laravel webpack laravel-mix

【解决方案1】：

首先，安装最新版本的 Video.js。

npm install --D video.js

在/resources/js/bootstrap.js 添加...

window._ = require('lodash');
require('video.js');

编译您的资产...

npm run prod

将以下内容添加到您的布局中。

<script src="{{ asset('js/app.js') }}"></script>

这里是我的package.json作为参考。

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.18",
        "lodash": "^4.17.21",
        "postcss": "^8.2.13",
        "video.js": "^7.11.8"
    }
}

还有webpack.mix.js。

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

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

然后，在播放器中。

<video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    data-setup="{}">
    <p class="vjs-no-js">
        To view this video please enable JavaScript, 
        and consider upgrading to a web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">
            supports HTML5 video
        </a>
    </p>
</video>

如果你想使用 CSS。然后包含在/resources/css/app.css:

@import "~video.js/dist/video-js";

【讨论】：