配置具有通用依赖项的 TypeScript 项目以构建多个纯 JavaScript 输出文件 [英] Configure a TypeScript project with common dependencies to build multiple plain JavaScript output files

问题描述

我目前正在为

机器人控制具有三个逐渐增加的复杂性级别:默认 AI、

为了方便为多个机器人编写代码，减少在裸JS编码时出现无意错误的机会，并增加我击败其他玩家的机会，我设置了以上 TypeScript 项目 为我的每个机器人提供公共库和代码.当前目录结构大致如下所示:

lib/bot.land.d.ts常见的.ts闪烁追踪者/BlinkStalker.ts配置文件炮兵/火炮.ts配置文件智能近战/SmartMelee.ts配置文件

lib 是机器人之间共享的通用代码，并为(非 TS)Bot Land API 提供 TypeScript 定义.然后每个机器人都有自己的文件夹，其中一个文件包含机器人代码，另一个是样板文件 tsconfig.json:

{编译器选项":{目标":es3"，模块":无"，源地图":假，"outFile": "bot.js"},文件":[导弹风筝.ts"],包括": [../lib/**/*"]}

当每个 tsconfig.json 被构建时，它会创建一个相应的 bot.js，其中包含来自机器人本身以及 all common.js 中的代码.由于以下几个原因，这种设置并不理想，其中包括:它需要大量重复的样板，难以添加新机器人，每个机器人都包含大量不必要的代码，并且需要单独构建每个机器人.

但是，根据我迄今为止的研究，似乎没有一种简单的方法可以完成我的工作想.特别是，使用新的 tsc -b 选项和引用不起作用，因为这需要对代码进行模块化，而 Bot Land 需要一个包含所有函数在顶层定义的文件.

尽可能多地实现以下目标的最佳方法是什么?

• 添加新机器人不需要新的样板(例如，每个机器人不需要 tsconfig.json)
• 对常用函数使用import，避免输出未使用的代码，但是...
• 仍然以 Bot Land 的特定格式将所有函数输出为一个文件
• 生成多个输出文件的单个构建步骤，每个机器人一个
• 奖励:将构建过程与 VS Code 集成.目前有一个相应的样板文件 tasks.json用于构建每个子项目.

我模糊地推测，除了 tsc 之外，答案可能还涉及 Grunt 之类的东西，但我对此知之甚少，无法确定.

解决方案

这是我的尝试 满足您的要求.

值得注意的文件:

• src/tsconfig-botland.json 保存任何 bot.land 脚本的设置(包括我移动到 types/bot-land/的自定义声明)index.d.ts).您可以更改我使用的 strict 设置.
• src/tsconfig.json 包含对所有机器人的引用.这是要添加另一个机器人脚本时要编辑的文件

机器人脚本至少是两个文件:一个极简的 tsconfig.json 和一个或多个 .ts 脚本文件.

例如src/AggroMiner/tsconfig.json:

<代码>{"extends": "../tsconfig-botland",编译器选项":{"outFile": "../../build/AggroMiner.js"},文件":[index.ts"]，"include": ["**/*.ts", "../lib/**/*.ts"]}

在大多数情况下，要启动一个新的机器人脚本，您应该:

1. 将任何 bot 文件夹(即 src/AggroMiner)复制到 src
下的新文件夹中
2. 编辑 src/<newBotFolder>/tsconfig.json 以使用您的机器人名称编辑 outFile
3. 编辑 src/tsconfig.json 并添加对 src/
的引用

以下npm/yarn脚本已经设置:

• build 构建所有机器人
• build-clean 在运行 build
之前清除 build 文件夹
• format 在 src
下的所有 .ts 文件上运行 Prettier
• lint 对所有机器人脚本运行 tslint 检查

现在降低您的要求:

• 添加新机器人不需要新的样板(例如，每个机器人不需要 tsconfig.json)

要实现这一点，需要创建一些脚本来枚举您的机器人文件夹/脚本...并为每个机器人设置相关的 tsconfig.json 并运行 tsc.除非绝对必要，否则最小设置(如上所述)可能就足够了.

• 对常用函数使用 import 以避免输出未使用的代码，但是...

首先，请注意，如果您开始使用任何模块 export/import 语句，您将需要额外的 3rd 方打包/treeshake 以实现单个文件输出.从我可以收集到的 Bot.land，您的脚本正在服务器上运行.除非死代码对你的机器人性能有影响，否则我不会真正打扰.

• 仍然以 Bot Land 的特定格式将所有函数输出为一个文件

完成.

• 生成多个输出文件的单个构建步骤，每个机器人一个

完成.

• 奖励:将构建过程与 VS Code 集成.目前有一个对应的样板 tasks.json 用于构建每个子项目.

npm 脚本应该出现在 vsc 的任务列表中(至少在我的列表中是这样)，这样就不需要 tasks.json.

I'm currently writing some scripts for Bot Land. Bot Land is a real-time strategy game where instead of controlling your units with a mouse and keyboard, you write code to control your bots via an API, and then your bots go fight others' bots. If you're familiar with units in SC2, you can create bots that are similar to blink stalkers, siege tanks, medics, and ultralisks. (It's quite a fun game for software engineers, but that's outside the scope of this question.)

Bot control has three levels of increasing complexity: a default AI, a Scratch-like programming language, and a reduced set of JavaScript called BotLandScript. Although the built-in editor for BotLandScript is reasonable, you have to upload all your code as one single file with global top-level functions everywhere. Naturally, this starts getting painful after a while if your code starts to get long and different bots share the same functions.

To facilitate writing code for multiple bots, reduce the chance for unintentional errors when coding in bare JS, and increase my chances of beating other players, I set up the above TypeScript project to provide a common library as well as code for each of my bots. The current directory structure looks like approximately like the following:

lib/ 
  bot.land.d.ts
  common.ts
BlinkStalker/
  BlinkStalker.ts
  tsconfig.json
Artillery/
  Artillery.ts
  tsconfig.json
SmartMelee/
  SmartMelee.ts
  tsconfig.json

lib is the common code that is shared among bots, and provides TypeScript definitions for the (non-TS) Bot Land API. Each bot then gets its own folder, with one file containing the bot code and the other a boilerplate tsconfig.json:

{
  "compilerOptions": {
    "target": "es3",
    "module": "none",
    "sourceMap": false,
    "outFile": "bot.js"
  },
  "files": [
    "MissileKite.ts"
  ],
  "include": [
    "../lib/**/*"
  ]
}

When each tsconfig.json is built, it creates a corresponding bot.js that contains transpiled code from the bot itself as well as all the code in common.js. This setup is suboptimal for a few reasons, among others: it requires a lot of duplicate boilerplate, makes it hard to add new bots, includes a lot of unnecessary code for each bot, and requires each bot to be built separately.

However, based on my research so far, it doesn't seem like there's an easy way to do what I want. In particular, using the new tsc -b option and references does not work, because that requires the code to be modularized and Bot Land requires a single file with all functions defined at the top level.

What's the best way to achieve as many of the following as possible?

• No new boilerplate required to add a new bot (e.g. no tsconfig.json per bot)
• Use import for common functions to avoid outputting unused code, but then...
• Still output all functions as one single file in Bot Land's specific format
• A single build step that produces multiple output files, one for each bot
• Bonus: integrating the build process with VS Code. There is a currently correspondingly boilerplate tasks.json for building each sub-project.

I vaguely surmise the answer probably involves something like Grunt in addition to tsc, but I don't know enough about that to be sure.

解决方案

Here is my attempt to answer your requirements.

Notable files:

• src/tsconfig-botland.json holds settings for any bot.land script (including your custom declarations which I moved to types/bot-land/index.d.ts). You may which to change the strict settings I used.
• src/tsconfig.json holds references to all your bots. This is the file to edit whenever you want to add another bot script

A bot script is at least two files: a minimalist tsconfig.json and one or more .ts script files.

For example src/AggroMiner/tsconfig.json:

{
    "extends": "../tsconfig-botland",
    "compilerOptions": {
        "outFile": "../../build/AggroMiner.js"
    },
    "files": ["index.ts"],
    "include": ["**/*.ts", "../lib/**/*.ts"]
}

In most cases, to start a new bot script you should:

1. copy any bot folder (i.e. src/AggroMiner) to a new folder under src
2. edit the src/<newBotFolder>/tsconfig.json to edit the outFile with the name of your bot
3. edit src/tsconfig.json and add a reference to src/<newBotFolder>

The following npm/yarn script have been set:

• build to build all bots
• build-clean which clear the build folder before running a build
• format to run Prettier on all .ts files under src
• lint to run a tslint check on all bot scripts

Now running down your requirements:

• No new boilerplate required to add a new bot (e.g. no tsconfig.json per bot)

To achieve this would require creating some script which would enumerate your bots folder/scripts... and setup the relevant per bot tsconfig.json and run tsc. Unless it is strictly necessary, a minimal setup (describe above) might be sufficient.

• Use import for common functions to avoid outputting unused code, but then...

First, be aware that if you start using any module export/import statements, you will need additional 3rd party to pack / treeshake in order to achieve a single file output. From what I could gather of Bot.land, your scripts are running on the server. Unless deadcode has an impact on your bot performance, I would not really bother.

• Still output all functions as one single file in Bot Land's specific format

Done.

• A single build step that produces multiple output files, one for each bot

Done.

• Bonus: integrating the build process with VS Code. There is a currently correspondingly boilerplate tasks.json for building each sub-project.

The npm scripts should appear in vsc's tasks list (at least they do in mine) thus making the tasks.json unnecessary.

这篇关于配置具有通用依赖项的 TypeScript 项目以构建多个纯 JavaScript 输出文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！