如何使用特定于浏览器的 vanilla JS 库对依赖项做出反应

Posted 2023-02-23

【中文标题】如何使用特定于浏览器的 vanilla JS 库对依赖项做出反应

【英文标题】：How do I use a browser specific vanilla JS library in react with dependancies

【发布时间】：2019-04-25 10:31:01

【问题描述】：

js/reactjs 产品与 janus webrtc 网关接口。我正在尝试使用 meetecho janus-gateway 源代码中提供的 janus.js 库，因为我知道：

A：这个库会检查浏览器是否兼容 Janus。 B：这个库由核心团队维护并保持更新。

所以我知道我已经不得不放弃 JSX 并使用 jQuery 或标准 javascript 来操作 react 提供的空。

我只需要知道如何导入设计为通过 html 中的脚本标签导入的脚本，它本身也有依赖关系。最好我会尝试不通过使用存根 index.html 文件将其加载到网站的每个页面上。这个项目变得相当庞大和沉重。

最坏的结果是我只需要使用其他 API 之一（例如 meetecho 的 restful API）并自己检查浏览器兼容性。但如果没有必要，我宁愿不重复所有这些工作。而且也不必在原型设计阶段的早期尝试弄清楚 webrtc 连接是如何工作的。

只是想先让 jQuery 依赖项工作：

//import $ from '../Api/janus/jquery.min.js';

//import $ from 'jquery';
//import jQuery from 'jquery';
//import adapter from 'webrtc-adapter';
const jQuery = require('jquery');

import Janus as JanusAPI from "../Api/janus/janus.js";

错误日志：

./src/Api/janus/janus.js
  Line 55:    'error' is not defined    no-undef
  Line 56:    'error' is not defined    no-undef
  Line 57:   'error' is not defined    no-undef
  Line 98:   'adapter' is not defined  no-undef
  Line 161:  'jQuery' is not defined   no-undef
  Line 167:  'adapter' is not defined  no-undef

Search for the keywords to learn more about each error.

【参考方案1】：

嗨，我想我会回答我自己的帖子，因为我已经走得更远了。

如果您希望 npm 将 Janus 识别为一个模块，则此文档具有基础知识：

https://janus.conf.meetecho.com/docs/js-modules.html

您可能需要修改 janus-gateway npm 项目的入口点，以在 npm rollup 汇总模块之前导入所需的依赖项。

然后您必须修改汇总配置以在模块中包含依赖项或在导入模块的项目中查找它们，可以在此处找到有关如何使用汇总执行此操作的良好起点：

https://engineering.mixmax.com/blog/rollup-externals

janus-gateway/npm 项目中的我的 module.js

/* eslint-disable */
/*
 * Module shim for rollup.js to work with.
 * Simply re-export Janus from janus.js, the real 'magic' is in the rollup config.
 *
 * Since this counts as 'autogenerated' code, ESLint is instructed to ignore the contents of this file when linting your project.
 */
//var adapter = require('webrtc-adapter');
import adapter from 'webrtc-adapter';

@JANUS_CODE@

export default Janus;

还有 rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import commonJS from 'rollup-plugin-commonjs';

import replace from 'rollup-plugin-replace';
import * as fs from 'fs';

export default 
    name: 'Janus',
    input: 'module.js',
    output: 
        strict: false
    ,
    plugins: [
        resolve(),
        commonJS(
//              namedExports: 
//
//              
                include: 'node_modules/**'
        ),
        replace(
            JANUS_CODE: fs.readFileSync('../html/janus.js', 'utf-8'),
            delimiters: ['@','@'],
            includes: 'module.js'
        )
    ]
;

不必使用此方法使用 Janus 实现任何 UI，但我至少有 API 可以使用默认依赖项进行初始化，并且可以创建/销毁会话并将插件附加到所述会话。

希望这会有所帮助:)