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

63lcw9qa 于 2022-11-14 发布在 TypeScript

关注(0)|答案(1)|浏览(138)

我最近创建了一个模块来监听文档上的按键输入，以从用作键盘的物理条形码阅读器获取事件。
可在此处找到来源：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是未定义的。
你能告诉我怎样才能达到我的目标吗？

npm

来源：https://stackoverflow.com/questions/54238389/how-to-make-my-npm-typescript-module-usable-in-simple-javascript-project

1条答案

按热度按时间

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文件中所述）。

赞(0）回复(0）举报 2022-11-14

我来回答

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

1条答案

相关问题

热门标签

最新问答