Laravel访问.blade.php js中的npm包

Question

什么是正确的方法来访问npm包js_sectionblade.php文件

资源\js\app.js

import Twilio from 'twilio-video';
window.Twilio = Twilio;

还尝试了：

require('twilio-video');

index.blade.php

@extends('layouts.app')

@section('content')
    CONTENT...
@endsection

@section('js_section')
    <script>
        const {connect} = require('twilio-video');

        connect('{{$result['token']}}', {name: 'test2'}).then(room => {
            console.log(`Successfully joined a Room: ${room}`);
            room.on('participantConnected', participant => {
                console.log(`A remote Participant connected: ${participant}`);
            });
        }, error => {
            console.error(`Unable to connect to Room: ${error.message}`);
        });
    </script>
@endsection

错误：未捕获引用错误：未定义require

Answer 1

要求和导入是Laravel混合（webpack）的命令

您已经运行了Laravel-混合从资源到捆绑包（准备好的文件）的构建结果。

在终端运行

npm install
npm i twilio-video
npm run dev

Answer 2

require（）不是内置在浏览器中，而是节点环境功能。因此，它无法从刀片模板访问。您可以做的是在webpack.mix.js中编译另一个js文件，并将令牌从隐藏输入传递到。

用custom.js写代码

const {connect} = require('twilio-video');

// it will contain $result['token']
const roomToken = document.querySelector('.room-token').value;

connect(roomToken, {name: 'test2'}).then(room => {
  console.log(`Successfully joined a Room: ${room}`);
  room.on('participantConnected', participant => {
    console.log(`A remote Participant connected: ${participant}`);
  });
}, error => {
  console.error(`Unable to connect to Room: ${error.message}`);
});

将其添加到webpack.mix.js中并编译（例如，使用npm run dev——取决于您的package.json脚本和环境）

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

mix.js('path/to/custom.js', 'public/folder');

在blade.php中

@section('js_section')
    <input type="hidden" class="room-token" value="{{ $result['token'] }}" />
    <script src="{{ asset( 'path/to/complied/custom.js' ) }}"></script>
@endsection