Set up a TypeScript project with essential dependencies for creating multiple raw JavaScript output files

Question

Set up a TypeScript project with essential dependencies for creating multiple raw JavaScript output files

Currently, I am in the process of developing scripts for Bot Land, a real-time strategy game that offers a unique gameplay experience. Rather than controlling units traditionally with a mouse and keyboard, players code their bots using an API to engage in battles against other players' bots. The game allows you to create bots resembling familiar units from SC2 such as blink stalkers, siege tanks, medics, and ultralisks.

The complexity of bot control in Bot Land increases gradually with three levels: default AI, a Scratch-like programming language, and BotLandScript—a reduced set of JavaScript. While coding in BotLandScript is manageable, it has limitations like uploading all code as one single file with global functions across bots, causing inconvenience when dealing with lengthy codes or shared functions among different bots.

To mitigate these challenges and enhance my performance, I structured a TypeScript project on GitHub to provide a common library and codebase for each bot. The directory layout includes:

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

In this structure, 'lib' contains shared code and TypeScript definitions, while each bot has its folder housing the bot code and a 'tsconfig.json' file defining compilation options.

Despite the current setup being functional, certain drawbacks exist, such as redundant boilerplate, complexity in adding new bots, unnecessary bloating of output files, and separate building processes for individual bots.

The challenge lies in finding an optimal solution catering to the following requirements:

Adding new bots without additional boilerplate
Utilizing 'import' for common functions to minimize unused code generation
Maintaining a single file output format required by Bot Land
Implementing a unified build step for multiple output files per bot
Optionally integrating the build process with VS Code through tasks automation

While solutions like Grunt and tsc may hold potential, further exploration and expertise are needed to find the most effective approach for streamlining the bot development process in Bot Land.

javascript typescript visual-studio-code tsconfig

Answer 1

Answer №1

Here is my response to address your specifications.

Key files:

src/tsconfig-botland.json contains settings for any bot.land script (including custom declarations moved to types/bot-land/index.d.ts). You may need to adjust the strict settings used.
src/tsconfig.json references all bots. This file should be edited when adding a new bot script.

A bot script consists of at least two files: a basic tsconfig.json and one or more .ts script files.

For instance, src/AggroMiner/tsconfig.json:

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

In most scenarios, starting a new bot script involves:

Copying a bot folder (e.g., src/AggroMiner) to a new folder under src
Editing
```
src/<newBotFolder>/tsconfig.json
```
to modify the outFile with the bot's name
Updating src/tsconfig.json by adding a reference to src/<newBotFolder>

The following npm/yarn scripts have been configured:

build compiles all bots
build-clean clears the build folder before running build
format executes Prettier on all .ts files within src
lint performs a tslint check on all bot scripts

Fulfilling your requirements:

No additional boilerplate needed to add a new bot (no tsconfig.json per bot)

To achieve this, a script could automate the creation of pertinent per bot tsconfig.json files and execute tsc. However, a minimal setup (as described) might suffice unless absolutely necessary.

Utilize import statements for common functions to prevent redundant code output, but...

Note that using module export/import statements necessitates third-party tools for packing / treeshaking to generate a single output file. Unless deadcode impacts bot performance in Bot.land—where scripts run on the server—it may not be crucial.

Nonetheless, consolidate all functions into a single file following Bot Land's specific format

Accomplished.

A consolidated build step generating multiple output files, each for a distinct bot

Successfully completed.

Bonus: integrating the build process with VS Code. A corresponding tasks.json currently exists for building each sub-project.

The npm scripts should display in vsc's tasks list (at least in mine), rendering the tasks.json superfluous.

Answer 2

Here is my response to address your specifications.

Key files:

src/tsconfig-botland.json contains settings for any bot.land script (including custom declarations moved to types/bot-land/index.d.ts). You may need to adjust the strict settings used.
src/tsconfig.json references all bots. This file should be edited when adding a new bot script.

A bot script consists of at least two files: a basic tsconfig.json and one or more .ts script files.

For instance, src/AggroMiner/tsconfig.json:

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

In most scenarios, starting a new bot script involves:

Copying a bot folder (e.g., src/AggroMiner) to a new folder under src
Editing
```
src/<newBotFolder>/tsconfig.json
```
to modify the outFile with the bot's name
Updating src/tsconfig.json by adding a reference to src/<newBotFolder>

The following npm/yarn scripts have been configured:

build compiles all bots
build-clean clears the build folder before running build
format executes Prettier on all .ts files within src
lint performs a tslint check on all bot scripts

Fulfilling your requirements:

No additional boilerplate needed to add a new bot (no tsconfig.json per bot)

To achieve this, a script could automate the creation of pertinent per bot tsconfig.json files and execute tsc. However, a minimal setup (as described) might suffice unless absolutely necessary.

Utilize import statements for common functions to prevent redundant code output, but...

Note that using module export/import statements necessitates third-party tools for packing / treeshaking to generate a single output file. Unless deadcode impacts bot performance in Bot.land—where scripts run on the server—it may not be crucial.

Nonetheless, consolidate all functions into a single file following Bot Land's specific format

Accomplished.

A consolidated build step generating multiple output files, each for a distinct bot

Successfully completed.

Bonus: integrating the build process with VS Code. A corresponding tasks.json currently exists for building each sub-project.

The npm scripts should display in vsc's tasks list (at least in mine), rendering the tasks.json superfluous.

Answer 3

Answer №2

If you want to streamline your project setup, consider using project references. By following these steps, you can achieve the same outcomes as your original files, consolidating all functions at the top level in a single file. Despite my efforts, I couldn't find a way to import only necessary functions in bots without relying on imports and exports.

Firstly, update your tsconfig.json at the root directory<

{
    "files": [],
    "references": [
        { "path": "./lib" }
        { "path": "./AggroMiner" }
        { "path": "./ArtilleryMicro" }
        { "path": "./MissileKite" }
        { "path": "./SmartMelee" }
        { "path": "./ZapKite" }
    ]
}

Then, create a tsconfig.json within your lib folder with the following configuration:

{
  "compilerOptions": {
    "declaration": true,
    "declarationMap": true,
    "composite": true,
    "rootDir": ".",
    "outFile": "../build/lib.js",
    "target": "es3",
    "removeComments": true,
    "sourceMap": false,
  },
  "files": [
    "data.ts",
    "movement.ts",
    "utils.ts"
  ]
}

Make adjustments in data.ts, movement.ts, and utils.ts to avoid compilation errors:

data.ts

/// <reference path="./bot.land.d.ts"/>

(...)

movement.ts


/// <reference path="./data.ts"/>
/// <reference path="./utils.ts"/>
(...)

utils.ts

/// <reference path="./bot.land.d.ts"/>
(...)

Add base.json at the root (to be extended by bots' tsconfig.json)

base.json

{
  "compilerOptions": {
    "declaration": true,
    "composite": true,
    "rootDir": ".",
    "target": "es3",
    "removeComments": true,
    "sourceMap": false,
  }
}

Adjust the tsconfig.json for your bots accordingly:

{
  "extends": "../base",
  "compilerOptions": {
    "outFile": "../build/AggroMiner.js",
  },
  "files": [
    "AggroMiner.ts"
  ],
  "references": [
      { "path": "../lib", "prepend": true } //remember to set prepend: true
  ]
}

Once done, run this command:

tsc -b

Answer 4

If you want to streamline your project setup, consider using project references. By following these steps, you can achieve the same outcomes as your original files, consolidating all functions at the top level in a single file. Despite my efforts, I couldn't find a way to import only necessary functions in bots without relying on imports and exports.

Firstly, update your tsconfig.json at the root directory<

{
    "files": [],
    "references": [
        { "path": "./lib" }
        { "path": "./AggroMiner" }
        { "path": "./ArtilleryMicro" }
        { "path": "./MissileKite" }
        { "path": "./SmartMelee" }
        { "path": "./ZapKite" }
    ]
}

Then, create a tsconfig.json within your lib folder with the following configuration:

{
  "compilerOptions": {
    "declaration": true,
    "declarationMap": true,
    "composite": true,
    "rootDir": ".",
    "outFile": "../build/lib.js",
    "target": "es3",
    "removeComments": true,
    "sourceMap": false,
  },
  "files": [
    "data.ts",
    "movement.ts",
    "utils.ts"
  ]
}

Make adjustments in data.ts, movement.ts, and utils.ts to avoid compilation errors:

data.ts

/// <reference path="./bot.land.d.ts"/>

(...)

movement.ts


/// <reference path="./data.ts"/>
/// <reference path="./utils.ts"/>
(...)

utils.ts

/// <reference path="./bot.land.d.ts"/>
(...)

Add base.json at the root (to be extended by bots' tsconfig.json)

base.json

{
  "compilerOptions": {
    "declaration": true,
    "composite": true,
    "rootDir": ".",
    "target": "es3",
    "removeComments": true,
    "sourceMap": false,
  }
}

Adjust the tsconfig.json for your bots accordingly:

{
  "extends": "../base",
  "compilerOptions": {
    "outFile": "../build/AggroMiner.js",
  },
  "files": [
    "AggroMiner.ts"
  ],
  "references": [
      { "path": "../lib", "prepend": true } //remember to set prepend: true
  ]
}

Once done, run this command:

tsc -b

Set up a TypeScript project with essential dependencies for creating multiple raw JavaScript output files

Answer №1

Answer №2

Similar questions

Troubleshooting a Peculiar Problem with Form Submission in IE10

Unable to add key/value pair to object in Node

What is the best way to retrieve the innerHTML content of an anchor tag with Cheerio?

Display current weather conditions with the Open Weather API (featuring weather icons)

What is the best way to navigate and map through an array of objects, especially when encountering an empty object?

Utilizing JSON data within a separate TypeScript function or within the ngOnInit lifecycle hook after successfully retrieving the data

Grouping geoJSON data on Mapbox / Leaflet

A method for combining multiple arrays into a single array within a For loop

Avoid including any null or undefined values within a JSON object in order to successfully utilize the Object.keys function

Access the Vue instance from a different element instance

The bar chart in chartjs is not displaying properly due to incorrect grouping

An Unexpected Token Leads to a SyntaxError in Jest's CSS-Modules

originalRenderPage has not been declared

Animation of active chat list items on Whatsapp

The second AJAX call is unsuccessful

Creating a function in Typescript that transforms an array into a typed object

Is it possible to execute a specified quantity of Promises simultaneously in Nodejs?

Enhance your websites' search functionality with jQuery autocomplete using AJAX

obtaining data from a JSON object in Node.js

Automatically submitting the form