如何让我的 npm typescript 模块在简单的 Javascript 项目中可用？

Question

我最近创建了一个模块来侦听文档上的按键输入，以从用作键盘的物理条码 reader 获取事件。
来源可以在这里找到：https://github.com/tii-bruno/physical-barcode-reader-observer
这里的 npm 模块：https://www.npmjs.com/package/physical-barcode-reader-observer
我在 Ionic 项目 (Angular + Cordova) 上使用它没有问题。
但我想在一个简单的 PHP / Javascript 项目上使用它（不使用 npm，而是使用旧的包含脚本），但我很难做到……
我尝试使用 gulp 进行浏览器验证，但是当我尝试使用我的 class 时，出现错误，例如 MyObject is undefined …
你能告诉我如何实现我的目标吗？

Answer 1

您需要制作一个 "build pipeline"。绝对是管理 npm 包的最佳方式 npm，因此您的项目应该包含 package.json 以及其他项目文件。

在这个 "build pipeline" 中，为了构建您的整个项目（idk，如果您使用 Makefile 或其他构建工具）首先您需要构建客户端（javascript）。您必须有一个 main.js 文件才能开始捆绑您的应用程序。该文件将如下所示：

const pbro = require('physical-barcode-reader-observer');
const anotherModule = require('./local_module.js');
...

如您所见，在这个主文件中我们需要我们想要的所有模块，因此任何捆绑工具（例如 Browserify 或 webpack）都知道哪个文件是应用程序的入口点。例如，browserify 文档说：

browserify main.js -o bundle.js

然后您会将所有模块捆绑到一个文件中，在本例中为 bundle.js。

接下来，我们希望将这个包包含到我们的 html 文件中，如下所示：

<html>
    <body>
        <script src="bundle.js" />
    </body>
</html>

注意：这只是一个建议，有很多方法可以将捆绑文件自动包含到 html 中，例如 webpack，它是 html-webpack-plugin

到目前为止我们得到的只是 "build pipeline"，接下来需要做的是计划部署。为此，您需要设置一个网络服务器并对其进行配置，以便为捆绑文件提供服务。例如，如果您的域是 www.domain.com，则您必须设置网络服务器才能找到 www.domain.com/bundle.js（如 html 文件中所述).

如何让我的 npm typescript 模块在简单的 Javascript 项目中可用？

How to make my npm typescript module usable in simple Javascript project?

javascript

module

npm

browserify

typescript