将opentok-layout-js添加到Webpack for Rails中

Question

我正在尝试将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？我的包包含在页面的标题中，并且可以用于所有其他目的。

Answer 1

默认情况下，Webpack不会将任何内容导出到全局范围。要解决您描述的问题，您可以选择以下几种方法：

1. 将您的JS放入Webpack（这是我的建议）

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

   // 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'
   

2. OR，配置Webpack以使用initLayoutContainer将expose-loader暴露给全局范围>

   [如果您坚持要在<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'
   

3. 或，您首次导入时将initLayoutContainer手动暴露给全局范围

2的替代方法是，只需从Webpack自己将导入的函数附加到窗口即可。这是我最不喜欢的，因为我喜欢避免这种副作用，而且我发现它容易出错。但是，大多数人发现这更容易。

// app/javascript/packs/application.js

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