使用TypeScript打包和运行HTML5示例

本教程展示了开始和实现LEADTOOLS HTML5和TypeScript库的一些方法。

所需的知识

本教程将使用http服务器，用于运行静态文件服务器的控制台命令。确保http服务器安装。如果没有安装，请先安装node . js然后安装http服务器．以下是相应的下载连结:

• https://nodejs.org/en/download/
• https://www.npmjs.com/package/http-server

创建项目

打开Visual Studio Code并创建一个新文件夹，作为您的项目目录，对于本教程的目的，您可以命名该文件夹LEADTOOLS HTML5-TS．

使用终端安装加载项

创建一个名为webpack在您创建的新文件夹中。

的新实例命令提示符,cd到webpack在上一步中创建的文件夹;或打开文件资源管理器，导航到webpack文件夹，并键入cmd中包含文件路径的下拉菜单栏。运行以下命令将必要的外接程序添加到webpack目录中。

• NPM I—save-dev webpack webpack-cli
• NPM I—save-dev babel-loader @babel/core @babel/preset-typescript @babel/preset-env @babel/plugin-proposal-class-properties
• NPM I——save-dev typescript ts-loader
• NPM I http-server

你可能得跑了npm init然后是其他命令，以便有如下图所示的设置。

确保package.json文件如下所示，以确保正确安装了所有内容。脚本部分是可选的，但它有助于运行webpack命令。

｛“脚本”: {“startTS”："webpack——config. /webpack.config. typescript .js"}，“devDependencies”: {“@babel /核心”：“^ 7.15.8”，“@babel / plugin-proposal-class-properties”：“^ 7.14.5”，“@babel / preset-env”：“^ 7.15.8”，“@babel / preset-typescript”：“^ 7.15.0”，“babel-loader”：“^ 8.2.2”，“ts-loader”：“^ 9.2.6”，“打字稿”：“^ 4.4.4”，“webpack”：“^ 5.59.0”，“webpack-cli”：“^ 4.9.1”｝｝

添加LEADTOOLS依赖项

文件中创建一个文件夹webpack文件夹命名LT．此文件夹将包含运行应用程序所需的LEADTOOLS依赖项。所需的LEADTOOLS引用取决于项目的目的。可以通过添加引用. js档案位于< INSTALL_DIR > \ LEADTOOLS22 \ Bin \ JS．为了查看应用程序所需的依赖项，需要查看. html位于您希望使用的文档页上的示例中的文件。188宝金博安卓下载

为了本教程的目的，我们将使用selectedItemsChanged事件188宝金博安卓下载文档页面。本例需要以下内容. jsLEADTOOLS文件:

• Leadtools.js
• Leadtools.Controls.js
• Leadtools.Annotations.Engine.js
• Leadtools.Annotations.Designers.js
• Leadtools.Annotations.Rendering.Javascript.js
• Leadtools.Annotations.Automation.js
• Leadtools.ImageProcessing.Main.js
• Leadtools.ImageProcessing.Color.js
• Leadtools.ImageProcessing.Core.js
• Leadtools.ImageProcessing.Effects.js
• Leadtools.Document.js
• Leadtools.Document.Viewer.js

一定要把这些放好. js新创建的文件LT目录中。有关应用程序需要哪些JS文件的完整列表，请参阅你的申请所包含的文件．

添加文件到src文件夹

创建一个名为src，在webpack文件夹中。

创建.ts文件，并将这些文件放入src文件夹中。的内容进行复制和添加.ts文件中相应的例子。的SelectedItemsChanged示例要求SelectedItemsChanged.ts文件和ImageViewer.ts文件。

接下来，创建一个名为SelectedItemsChanged.html，在src文件夹中。在这个新的HTML文件中复制并粘贴示例中提供的代码。

创建index.ts文件

在src文件夹，创建一个名为index.ts．将下面的代码添加到新文件。

进口{(类名在ts文件)作为(调用名称的结束)}从”。/(ts文件名称)'；常量ImageViewer = {(呼叫名称结束)｝常量示例= {imageview};窗口(“例子”] = examples;

根据您正在使用的具体示例，将有一些单词和路由必须替换/更改。这将在以下步骤中解释。

同样，如果示例包含一个帮助文件，则在本例中为ImageViewer.ts文件，请确保在src文件夹，并添加必要的代码。文档页示例中提供了帮助文件的源代码。188宝金博安卓下载

请注意

在......顶端< EXAMPLE_NAME > .ts，请务必参考< HELPER_FILE_NAME.ts >文件如下所示:

import {ImageViewer_Example} from "./ImageViewer.ts";

查看. html您正在处理的示例的文件，并滚动到它的底部，找到它调用的位置windows.onload调用。确保windows.onload调用如下面的截图所示。

完成后，回到index.ts文件，然后填写由“调用名称的结束”所指示的位置，以及在.html文件中复制的内容。完成的index.ts文件应该类似于下面的代码:

进口{ImageViewer_SelectedItemsChangedExample as SelectedItemsChanged} from”。/ SelectedItemsChanged”；常量ImageViewer = {SelectedItemsChanged｝常量示例= {imageview};窗口(“例子”] = examples;

创建webpack.config.TypeScript.js而且tsconfig.json文件

在webpack文件夹创建两个新文件，webpack.config.TypeScript.js而且tsconfig.json．将下面的代码添加到tsconfig.json文件。

｛“compilerOptions”: {“outDir”：“距离”，“noImplicitAny”：真正的，“模块”：“es6”，“目标”：“es5”，“jsx”：“反应”，“allowJs”：真正的，“moduleResolution”：“节点”｝｝

将下面的代码添加到webpack.config.TypeScripts.js文件。

var路径= require(“路径”）;模块。出口= {模式:“发展”，条目:“/ src / index.ts。”，输出:{文件名:“bundle.js”，路径:__dirname}，模块:{规则:[{测试:x / \。(ts | js) ?/美元,排除:/ (node_modules | bower_components) /用途:{加载程序:“babel-loader”，选择:{预设:[“@babel / preset-typescript”),插件:[“@babel / plugin-transform-typescript”］｝｝})}，解决:{扩展:[“.tsx”，“.ts”，. js”),｝};

运行LEADTOOLS演示/文档服务

有些示例还需要运行LEADTOOLS Demo或Document Service才能运行该示例。要知道你的文件是否有，请检查文件的注释。

一个例子可以在主题是示例，在ViewerInitalizer.js文件。在该文件中，有一个声明DocumentServices为了让示例正常工作，演示需要同时运行。

文档中的“使用文档服务设置和配置Demo”部分详细介绍了如何设置和配置LEADTOOLS文档服务开始使用文档查看器演示教程。

运行项目

我们需要将文件与webpack终端命令。下面的命令将生成一个bundle.js文件在webpack文件夹中。

• npm运行start

一旦bundle.js文件创建后，运行下面的命令。

• http服务器。/

服务器应该启动并运行http://localhost:8080．控制台中应该出现一条消息，指示服务器可用的所有端口。

要进行测试，请输入服务器正在运行的一个链接并导航到该链接Webpack / -> src/ -> . txt . html

总结

本教程展示了如何运行位于LEADTOOLS HTML5/JS文档页面中的任何TypeScript示例。188宝金博安卓下载

另请参阅

• LEADTOOLS SelectedItemsChanged事件文档188宝金博安卓下载
• LEADTOOLS SDK下载
• 节点
• http服务器