Cloudflare Workers允许您快速将Javascript代码部署到全球150多个数据中心，并在非常接近最终用户的情况下执行。使用Workers IDE和集成的ChromeDev工具，编辑/编译/调试的故事已经相当惊人了。但是，对于那些渴望一些Typescript和一个具有静态分析、自动完成和jazz的IDE的人来说，接下来看看用Webstorm和npm建立一个Typescript项目的方法run upload your code directly to the edge。先决条件我的环境是这样的：马科斯山脉节点v8.11.3npm v5.6.0版Webstorm v2018.1.3版您还需要一个Cloudflare域并激活它上的worker。我会用的cryptoserviceworker.com我还将使用约曼建立我们的初步脚手架。用npm安装yo-g入门让我们从一个带有"hello world"类和一个测试的最小节点应用程序开始。mkdir cryptoserviceworker和cd cryptoserviceworkernpm安装生成器节点typescript-gyo节点typescript该生成器将创建以下目录结构：drwxr-xr-x 16史蒂夫员工512 6月18日20:40。drwxr-xr-x 10史蒂夫员工320 6月18日20:35。。-rw-r--r--1史蒂夫员工197年6月18日20:40编辑配置-rw-r--r--1史蒂夫员工96年6月18日20:40。gitignore-rw-r--r--1史蒂夫员工147 6月18日20:40。npmignore-rw-r--r--1史蒂夫员工267年6月18日20:40。特拉维斯·伊梅尔drwxr-xr-x 5史蒂夫员工160 6月18日20:40。vscode-rw-r--r--1史蒂夫员工1066年6月18日20:40许可证-rw-r--r--1史蒂夫员工2071年6月18日20:40自述文件.mddrwxr-xr-x 4史蒂夫员工128 6月18日20:40__drwxr-xr-x 479 steve staff 15328 2018年6月20:40节点模块-rw-r--r--1史蒂夫员工244624 6月18日20:40套餐-锁定.json-rw-r--r--1史蒂夫员工1506年6月18日20:40包.jsondrwxr-xr-x 4史蒂夫员工2018年6月128日20:40 src-rw-r--r--1史蒂夫员工454 6月18日20:40tsconfig.json文件-rw-r--r--1史蒂夫员工2018年6月73日20:40tslint.json文件它包括默认设置、任务运行器、初始Typescript配置等等。我们不会全部使用，但这是一个很好的起点。第一次试验如果我们看一下src的内容/迎宾员.ts，我们将看到它是helloworld的一个非常典型的Typescript实现。$猫迎宾员.ts出口类迎宾员{私人问候语：弦乐；构造函数（消息：字符串）{这个。问候语=消息；}public greet（）：字符串{返回`Bonjour${这个。问候语}!`;}}因为Yeoman已经建立了我们的测试基础设施，所以我们应该能够使用u tests_u/greeter中的greeter测试来练习代码-规范从"../src/Greeter"导入{Greeter}；test（'应该用信息问候'，（）=>{const greeter=新迎宾者（'friend'）；期待(欢迎。欢迎（））.toBe（'你好，朋友！'）;});这台发电机是开玩笑的。它是在本地安装的，但为了方便起见，让我们全局安装并运行它！npm安装jest-g开玩笑通过测试迎接者-规范通过测试/索引-规范测试套件：2个通过，共2个测试：2次通过，共2次快照：共0个时间：1867秒运行了所有测试套件。好的，我们有一个可测试的Typescript模板。让我们启动Webstorm并编写一些代码！你好，工人世界Typescript中的hello world实现可能如下所示：Webstorm不喜欢它，正如你从红色错误高亮显示中可以看到的那样。尽管请求和响应是ServiceWorkerAPI的一部分，并将在V8运行时提供给我们，但是Typescript还不知道它们。node fetch为node提供了一个实现，所以让我们安装它。npm安装节点获取npm install@类型/节点获取这让Webstorm更开心了。它能够找到类型定义。现在让我们写一个测试。创建新文件tests/worker-规范:从"节点获取"导入{Request}；从"../src/Worker"导入{Worker}；test（'应该打招呼'，（）=>{const worker=新worker（）；const request=新请求（"https://cryptoservicework.com/");常数响应=工人.句柄（请求）；期待(响应.状态).toEqual（200）；期待(响应.正文).toEqual（"你好，世界！"）;});删除其他文件和测试，这样我们就可以工作了工人.ts和工人-spect.ts开玩笑通过测试-规范通过测试-规范js测试套件：2个通过，共2个测试：2次通过，共2次快照：共0个时间：1.213秒，估计2秒好的，我们的测试通过了，但是注意到它同时运行了Typescript和Javascript？让我们仅限于打字。进入包.json，找到笑话和改变"testRegex"："（/\u tests_u/.*|\\（test | spec））\\（ts | js）$"，到"testRegex"："（/\u tests\u\/.*）\\-规范$"再次运行：开玩笑通过测试-规范✓应该打招呼（8毫秒）测试套件：1个通过，共1个测试：1个通过，共1个快照：共0个时间：1.123s，估计2秒运行了所有测试套件。更好。好的，把它运过来！从本地Typescript到Worker兼容的Javascript。我们来看看src/工人.js看看我们的打字稿是如何传输的。"严格使用"；对象定义属性（导出，"\u esModule"，{value:true}）；const node_fetch_1=require（"node fetch"）；班主任{处理（请求）{return new node_fetch_1.Response（'Hello，world！'）;}}出口。工人=工人；实际上，让我们在Cloudflare Workers IDE中尝试一下，并进行真正的测试。转到仪表板，单击Workers图标，然后单击"启动编辑器"首先，检查规范的helloworld实现是否正常工作。太棒了，现在让我们用"transpiped from Typescript"版本替换它：失败。好吧，所以现成的"从typescript转换"是行不通的。让我们进行必要的更改以手动运行它，然后将其合并到构建过程中。错误1:未捕获引用错误：第2行未定义导出这很简单，让我们添加var exports={}。更新预览。错误2:未捕获引用错误：第4行未定义require没错，我们在Cloudflare Edge上运行V8，唯一的代码就是我们上传的代码。没有要包括的"节点模块"。另外，那句台词是给德夫的。把它取下来。更新预览。错误3:未注册事件处理程序。这个脚本什么也不做。好的，我们需要调用代码。让我们在文件的顶部添加一个片段来实际调用我们的worker。addEventListener（'fetch'，事件=>{让工人=新员工出口。工人();事件响应(工人.句柄(事件请求));})错误4:未捕获的引用错误：未定义节点"获取"1对，我们删除了它，因为当响应在worker上下文中运行时，它是一个本机对象。所以删除node_fetch_1前缀。错误5:导出。esModule=true不执行任何操作所以我们把它去掉。成功！！好的，通过一些按摩，我们让一个工人从Typescript中被转换来执行。我们：添加了一行以创建导出对象删除了"node\u fetch"上的dev依赖项删除了导出。yu esModule=true line让我们把它添加到我们的构建过程中，这样我们就可以在每次修改Typescript时使用"Worker ready"Javascript。咕噜我要用Grunt来实现自动化。这是我的新产品工人.ts//--开始序言--/////调用worker///var导出={}；///addEventListener（'fetch'，事件=>{/// 事件响应（获取和应用(事件请求))/// });//////异步函数fetchAndApply（请求）{///让工人=新员工出口。工人();///返回工人.句柄（请求）；/// }//——结束序言--//--开始注释--//模拟浏览器中可用的方法和对象从'node fetch'导入{Request，Response}；//--结束注释--出口班工人{公共句柄（request:request）{return new Response（"你好，世界！"）}}我想取消对前导的注释，以调用脚本，注释掉dev依赖项，并删除\uu esmodule行。让我们安装Grunt，一个文本替换模块并创建一个Gruntfile.js文件npm install grunt cli-gnpm install grunt—保存开发npm install grunt replace--save dev触摸Gruntfile.js文件我的Gruntfile.js文件看起来像这样模块.导出=功能（咕噜声）{grunt.loadNpmTasks公司（"grunt-replace"）；grunt.initConfig配置({替换：{评论：{选项：{图案：[{/*开发期间节点的注释导入*/匹配：/--开始注释--[\s\s]*？--结束注释--/g，replacement:"开发环境代码块已被生成删除"},{/*取消对production的前序的注释以处理请求*/匹配：//\/\/\///mg，替换：""}]},文件：[{展开：真，展平：真，src:['src/工人.ts']，dest:'构建/'}]},出口：{//删除typescript包含的导出行，但不包含//抑制，但不在工人运行的v8 env中。选项：{图案：[{匹配：/exports.\uu esModule=true；/g，replacement:"//导出由build注释的行"}]},文件：[{展开：真，展平：真，src:['build/工人.js']，dest:'构建/'}]}}});grunt.registerTask（'prepare-typescript'，'替换：注释');grunt.registerTask（'fix-export'，'替换：导出');};有两个任务。第一个步骤是在转换Typescript之前需要的注释/取消注释步骤。第二个是删除导出$grunt准备typescript正在运行"替换：注释"（替换）任务>>1个文件中有11个替换项。完成。如果我们打开build/工人.ts，我们看到：//--开始序言--//调用工作线程var导出={}；addEventListener（'fetch'，事件=>{事件响应（获取和应用(事件请求))});异步函数fetchAndApply（请求）{让工人=新员工出口。工人();返回工人.句柄（请求）；}//——结束序言--//开发环境代码块已被生成删除出口班工人{处理（public request）{return new Response（"你好，世界！"）}}正在打开生成/工作线程。