是否可以用webpack加载twilio.js库?

Is it possible to load twilio.js library with webpack?

本文关键字：twilio js 加载 webpack 是否      更新时间：2023-09-26

我需要的是一种方法来捆绑我所有的javascript依赖到一个javascript文件与Webpack(就像与socket.io-client)，但我不能这样做与twilio.js

我可以看到这里列出了最新的twilio.js:https://www.twilio.com/docs/client/twilio-js作为脚本标签:

//static.twilio.com/libs/twiliojs/1.2/twilio.min.js

但这只是一个加载器脚本用于构建真正的twilio.js库:

https://static.twilio.com/libs/twiliojs/refs/82278dd/twilio.min.js

这些都不支持Webpack。

https://github.com/twilio/twilio-node也存在，但这只适用于node.js，而不仅仅是普通的客户端javascript。

所以我的问题是，有没有一种方法来要求twilio.js库与Webpack ?

此答案适用于Twilio.js客户端版本1.3.16(脚本文件，文档)。

Twilio的代码库非常糟糕。他们不会将代码发布到npm，并且简单地从CDN加载twilio.js文件会产生副作用，包括从window读取并遍历页面上的所有脚本标签。这意味着，即使有下面的答案，客户端代码也不能在节点中加载，阻塞服务器端渲染和测试等。

我将这个包作为代码的镜像发布到npm，但它并不容易使用。Webpack不能正确处理他们设置的任何虚假的require结构。首先,安装:

npm install --save twilio-client-mirror

然后使用，要求正常:

import * as loadTwilio from 'twilio-client-mirror';

然而，你实际上不能使用loadTwilio对象。您必须引用全局Twilio对象，该对象由脚本注入:

const Twilio = window.Twilio;
Twilio.Device.setup(token);
...

这是我第一次尝试将这些零散的代码包含在现代代码库中。希望在即将到来的1.4测试版中，他们能解决这些问题。

我知道这有点晚了，但我也刚刚纠结过这个问题。作为Node、TypeScript和Webpack的新手，我无法理解Webpack应该用于客户端脚本，而Twilio-node库是一个服务器端库(如这里所讨论的那样)。换句话说，您不应该在任何客户端脚本中使用require('twilio')……只有Node脚本。

我成功地完成了以下任务:

  1. 添加<script type="text/javascript" src="//static.twilio.com/libs/twiliojs/1.2/twilio.min.js"></script>到我的主.html页面
  2. 在Node (server)脚本中使用var twilio = require('twilio');…而不是(例如，在API方法中添加Twilio调用，可以使用Express等框架创建)
  3. 如果你碰巧在Node脚本中使用TypeScript，使用一个转译器，比如TypeScript原生转译器tsc(很容易在命令行中完成)。如果使用JavaScript，使用GulpJS(我最喜欢的)或GruntJS来帮助你整合甚至运行你的Node服务器端脚本
  4. 使用Webpack

再说一遍，我是新手，所以如果我说错了，我愿意接受输入或更正。

相关文章：