为 Rails 添加 opentok-layout-js 到 webpack答案

【问题标题】：Add opentok-layout-js to webpack for Rails为 Rails 添加 opentok-layout-js 到 webpack
【发布时间】：2019-12-19 19:35:37
【问题描述】：

我正在尝试将 opentok-layout-js 添加到使用 webpack 的 rails 6 应用程序中。 (https://github.com/aullman/opentok-layout-js)

我看到我可以通过纱线添加它。所以我做到了。在我的 app/javascript/packs/application.js 文件中，我添加了：

require("opentok-layout-js")

当我尝试运行示例时：

<script type="text/javascript" charset="utf-8">
    var layoutContainer = document.getElementById("layoutContainer");

    // Initialize the layout container and get a reference to the layout method
    var layout = initLayoutContainer(layoutContainer).layout;

    // Below is a normal hello world OpenTok application for v2 of the API
    // The layout container will redraw when the layout mtehod is called and
    // adjust the layout accordingly
    var sessionId = "mySessionId";
    var token = "myToken";
    var apiKey = "myAPIKey";

    var session = OT.initSession(sessionId);
    session.on("streamCreated", function(event){
        session.subscribe(event.stream, "layoutContainer", {
            insertMode: "append"
        });
        layout();
    }).connect(apiKey, token, function (err) {
        if (!err) {
            session.publish("publisherContainer");
            layout();
        }
    });
</script>

这不断产生“initLayoutContainer”未定义消息。

在他们的例子中，他们使用：

<script src="js/opentok-layout.min.js"></script>

初始化该脚本。当我使用 webpack 并将其包含在我的包中时。我做错了什么，为什么当它按照我的方式完成时看不到 initLayoutContainer？我的包包含在页面标题中，可用于所有其他目的。

【问题讨论】：

标签： ruby-on-rails webpack opentok

【解决方案1】：

默认情况下，Webpack 不会将任何内容导出到全局范围。要处理您描述的问题，您有几个选择：

把你的 JS 放到 Webpack 中（这是我推荐的）

无需使用<script> 标签来初始化和设置opentok，只需将一个JS 文件添加到您的Webpack 依赖关系图中即可。在这里，您可以获得捆绑此 JS 的好处，确保模块可用于 import 语句、linting、单元测试等。

// app/javascript/src/setup.js 
import initLayoutContainer from 'opentok-layout-js'

document.addEventListener('DOMContentLoaded', function() {
  const layoutContainer = document.getElementById("layoutContainer")
  const layout = initLayoutContainer(layoutContainer)
  // ...
})

// app/javascript/packs/application.js

import '../src/setup'

或者，配置 Webpack 以使用 expose-loader 将 initLayoutContainer 公开到全局范围

如果您坚持在 <script> 标记中的 Webpack 包之外进行实时设置，您可以扩展您的 Webpacker 配置，以确保您选择的导出在浏览器中的 window 对象上可用依赖图。

// config/webpack/environment.js

const { environment } = require('@rails/webpacker')

environment.loaders.append('opentok-layout', {
  test: require.resolve('opentok-layout-js'),
  use: [{
    loader: 'expose-loader',
    options: 'initLayoutContainer'
  }]
})

module.exports = environment

// app/javascript/packs/application.js

import 'opentok-layout-js'

或者，第一次导入时手动将initLayoutContainer 公开到全局范围

2. 的替代方法是简单地将导入的函数从 Webpack 中自己附加到窗口。这是我最不喜欢的，因为我更喜欢避免这样的副作用，而且我发现它容易出错；但是，大多数人觉得这更容易。
```
// app/javascript/packs/application.js

import initLayoutContainer from 'opentok-layout-js'
window.initLayoutContainer = initLayoutContainer
```

【讨论】：

第一个对我不起作用，但第三个对我有用。我很高兴:)

【解决方案2】：

这是因为在他们的示例中，他们将其直接存储在本地 src 中。您可以在 repo 的根目录中找到它并执行相同操作。 https://github.com/aullman/opentok-layout-js 这就是我为解决问题所做的。

【讨论】：