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

Question

I recently create a module to listen keypressed input on document to get events from physical barcode reader used as keyboard. 我最近创建了一个模块，用于侦听文档上的按键输入，以从用作键盘的物理条形码读取器获取事件。
The source can be found here : https://github.com/tii-bruno/physical-barcode-reader-observer 可以在这里找到源： https : //github.com/tii-bruno/physical-barcode-reader-observer
The npm module here : https://www.npmjs.com/package/physical-barcode-reader-observer 此处的npm模块： https ://www.npmjs.com/package/physical-barcode-reader-observer
I had no problem to use it on an Ionic project (Angular + Cordova). 我在Ionic项目（Angular + Cordova）上使用它没有问题。
But I would like to use it on a simple PHP / Javascript project (wich does not use npm but old include script), and I have some difficulties to do that … 但是我想在一个简单的PHP / Javascript项目（它不使用npm但使用旧的include脚本）上使用它，但是这样做有些困难……
I tried to browserify with gulp but when I tried to use my class, I have an error like MyObject is undefined … 我试图用gulp浏览器进行浏览，但是当我尝试使用我的类时，出现类似MyObject is undefined的错误……
Could you, please, tell me how I can achieve my goal? 能否请您告诉我如何实现我的目标？

Answer 1

You will need to make a "build pipeline". 您将需要建立一个“构建管道”。 Definitely the best way to manage npm packages is thought npm , so your project should include a package.json along the other project files. 绝对最好的npm软件包管理方法是npm ，因此您的项目应在其他项目文件中包含package.json 。

In this "build pipeline", in order to build your whole project (idk if you are using Makefile or another building tool) first you need to build the client (the javascript). 在此“构建管道”中，为了构建整个项目（如果使用的是Makefile或其他构建工具，则为idk），首先需要构建客户端（javascript）。 You must have a main.js file in order to start bundling your app. 您必须具有main.js文件才能开始捆绑您的应用程序。 This file will look like this: 该文件将如下所示：

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

As you can see, inside this main file we require all the modules we want, so any bundle tool (such as Browserify, or webpack) knows which file is the entry point of the application. 如您所见，在此主文件中，我们需要所需的所有模块，因此任何捆绑工具（例如Browserify或webpack）都知道哪个文件是应用程序的入口点。 For example, browserify docs sais: 例如， browserify docs表示：

browserify main.js -o bundle.js

Then you will have all modules bundled to one single file, in this case bundle.js . 然后，将所有模块捆绑到一个文件中，在本例中为bundle.js 。

Next, we would like to include this bundle to our html file like this: 接下来，我们希望将此捆绑包包含在我们的html文件中，如下所示：

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

Note: this is just a suggestion, there are many ways to include the bundled file automatically into the html like with webpack and it's html-webpack-plugin 注意：这只是一个建议，有很多方法可以将捆绑文件自动包含到html中，就像使用webpack一样，它是html-webpack-plugin

What we got so far is just the "build pipeline", what is needed to do next is to plan the deploy. 到目前为止，我们所获得的只是“构建管道”，接下来需要做的是计划部署。 For this you will need to set up a webserver and configure it in order to serve the bundled file. 为此，您将需要设置一个Web服务器并对其进行配置，以提供捆绑的文件。 For example, if your domain is www.domain.com, then you will have to set the webserver up in order to find www.domain.com/bundle.js (as stated in the html file). 例如，如果您的域名是www.domain.com，则必须设置Web服务器才能找到www.domain.com/bundle.js（如html文件中所述）。

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-01-17 15:13:41

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-01-17 15:13:41

解决方案1
0 已采纳 2019-01-17 15:13:41