如何让我的npm TypeScript模块在简单的JavaScript项目中可用?

63lcw9qa  于 2022-11-14  发布在  TypeScript
关注(0)|答案(1)|浏览(136)

我最近创建了一个模块来监听文档上的按键输入,以从用作键盘的物理条形码阅读器获取事件。
可在此处找到来源:https://github.com/tii-bruno/physical-barcode-reader-observer
这里的npm模块:https://www.npmjs.com/package/physical-barcode-reader-observer
我没有问题使用它在一个离子项目(Angular + cordova )。
但是我想在一个简单的PHP / JavaScript项目上使用它(它不使用npm,而是使用旧的include脚本),这样做有一些困难。
我试着用gulp浏览,但是当我试着使用我的类时,我有一个错误,比如MyObject是未定义的。
你能告诉我怎样才能达到我的目标吗?

wi3ka0sx

wi3ka0sx1#

您需要创建一个“构建管道”。毫无疑问,管理NPM包的最好方法是npm,因此您的项目应该在其他项目文件中包含一个package.json
在这个“构建管道”中,为了构建整个项目(如果使用Makefile或其他构建工具,则为idk),首先需要构建客户端(javascript)。为了开始捆绑应用,必须有一个main.js文件。该文件如下所示:

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

正如您所看到的,在这个主文件中,我们需要所有我们想要的模块,因此任何捆绑工具(如Browserify或webpack)都知道哪个文件是应用程序的入口点。

browserify main.js -o bundle.js

然后将所有模块捆绑到一个文件中,在本例中为bundle.js
接下来,我们希望将此包包含到html文件中,如下所示:

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

注意:这只是一个建议,有很多方法可以将捆绑文件自动包含到html中,就像webpack一样,它是html-webpack-plugin
到目前为止,我们得到的只是“构建管道”,下一步需要做的是规划部署。为此,您需要设置一个Web服务器并对其进行配置,以便为捆绑的文件提供服务。例如,如果您的域是www.domain.com,则您需要设置Web服务器,以便找到www.domain.com/bundle.js(如html文件中所述)。

相关问题