.blade.php js中的Laravel包

Question

在js_section of blade.php文件中访问npm包的正确方法是什么？

resources\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

错误:未定义未定义的ReferenceError: require

Answer 1

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

Answer 2

“需求”和“导入”是Laravel的命令(Webpack)。

您已经运行了Laravel，用于从资源到包(准备好的文件)构建结果。

在终端运行

npm install
npm i twilio-video
npm run dev