Định cấu hình dự án TypeScript với các phụ thuộc chung để xây dựng nhiều tệp đầu ra JavaScript đơn giản

Tôi hiện đang viết một số kịch bản cho Bot Land . Bot Land là một trò chơi chiến lược thời gian thực, thay vì điều khiển các đơn vị của bạn bằng chuột và bàn phím, bạn viết mã để điều khiển các bot của mình thông qua API và sau đó các bot của bạn sẽ chiến đấu với các bot của người khác. Nếu bạn đã quen thuộc với các đơn vị trong SC2, bạn có thể tạo các bot tương tự như kẻ theo dõi chớp mắt, xe tăng bao vây, huy chương và ultralisks. (Đây là một trò chơi khá thú vị dành cho các kỹ sư phần mềm, nhưng điều đó nằm ngoài phạm vi của câu hỏi này.)

Điều khiển Bot có ba mức độ phức tạp tăng dần: AI mặc định, ngôn ngữ lập trình giống như Scratch và một bộ JavaScript giảm gọi là BotLandScript. Mặc dù trình chỉnh sửa tích hợp cho BotLandScript là hợp lý, bạn phải tải lên tất cả mã của mình dưới dạng một tệp duy nhất với các hàm cấp cao nhất toàn cầu ở mọi nơi. Đương nhiên, điều này sẽ bắt đầu trở nên đau đớn sau một thời gian nếu mã của bạn bắt đầu dài và các bot khác nhau có chung các chức năng.

Để tạo điều kiện viết mã cho nhiều bot, giảm cơ hội xảy ra lỗi vô ý khi mã hóa trong mã trần và tăng cơ hội đánh bại những người chơi khác, tôi đã thiết lập dự án TypeScript ở trên để cung cấp thư viện chung cũng như mã cho mỗi bot của tôi . Cấu trúc thư mục hiện tại trông giống như sau:

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

liblà mã phổ biến được chia sẻ giữa các bot và cung cấp các định nghĩa TypeScript cho API Bot Land (không phải TS). Mỗi bot sau đó nhận được thư mục riêng của mình, với một tệp chứa mã bot và tệp còn lại là bản soạn sẵn tsconfig.json:

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

Khi mỗi cái tsconfig.jsonđược xây dựng, nó tạo ra một mã tương ứng bot.jschứa mã được mã hóa từ chính bot cũng như tất cả mã trong đó common.js. Thiết lập này không tối ưu vì một số lý do, trong số những lý do khác: nó đòi hỏi rất nhiều bản sao chép trùng lặp, khiến cho việc thêm bot mới trở nên khó khăn, bao gồm rất nhiều mã không cần thiết cho mỗi bot và yêu cầu mỗi bot phải được xây dựng riêng.

Tuy nhiên, dựa trên nghiên cứu của tôi cho đến nay , dường như không có cách nào dễ dàng để làm những gì tôi muốn. Cụ thể, sử dụng tsc -btùy chọn mới và tham chiếu không hoạt động, vì điều đó đòi hỏi mã phải được mô đun hóa và Bot Land yêu cầu một tệp duy nhất với tất cả các chức năng được xác định ở cấp cao nhất.

Cách tốt nhất để đạt được càng nhiều điều sau đây càng tốt?

• Không yêu cầu nồi hơi mới để thêm bot mới (ví dụ: không có tsconfig.jsonmỗi bot)
• Sử dụng importcho các chức năng phổ biến để tránh xuất mã không sử dụng, nhưng sau đó ...
• Vẫn xuất tất cả các chức năng dưới dạng một tệp duy nhất ở định dạng cụ thể của Bot Land
• Một bước xây dựng duy nhất tạo ra nhiều tệp đầu ra, một cho mỗi bot
• Phần thưởng: tích hợp quá trình xây dựng với Mã VS. Hiện tại có một bản tóm tắt tương ứng tasks.jsonđể xây dựng từng tiểu dự án.

Tôi mơ hồ phỏng đoán câu trả lời có lẽ liên quan đến một cái gì đó giống như Grunt tsc, nhưng tôi không biết đủ về điều đó để chắc chắn.

Đây là nỗ lực của tôi để trả lời yêu cầu của bạn.

Các tập tin đáng chú ý:

• src/tsconfig-botland.jsongiữ các cài đặt cho bất kỳ tập lệnh bot.land nào (bao gồm các khai báo tùy chỉnh mà tôi đã chuyển đến types/bot-land/index.d.ts). Bạn có thể thay đổi strictcài đặt tôi đã sử dụng.
• src/tsconfig.jsongiữ tài liệu tham khảo cho tất cả các bot của bạn. Đây là tệp để chỉnh sửa bất cứ khi nào bạn muốn thêm tập lệnh bot khác

Một tập lệnh bot có ít nhất hai tệp: một tập tin tối giản tsconfig.jsonvà một hoặc nhiều .tstập lệnh.

Ví dụ src/AggroMiner/tsconfig.json:

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

Trong hầu hết các trường hợp, để bắt đầu một tập lệnh bot mới, bạn nên:

1. sao chép bất kỳ thư mục bot (tức là src/AggroMiner) vào một thư mục mới bên dướisrc
2. chỉnh sửa src/<newBotFolder>/tsconfig.jsonđể chỉnh sửa outFilevới tên bot của bạn
3. chỉnh sửa src/tsconfig.jsonvà thêm một tham chiếu đếnsrc/<newBotFolder>

Tập lệnh npm/ yarntập lệnh sau đã được đặt:

• build xây dựng tất cả các bot
• build-cleanXóa buildthư mục trước khi chạybuild
• formatđể chạy Prettier trên tất cả .tscác tệp trongsrc
• lint để chạy kiểm tra tslint trên tất cả các tập lệnh bot

Bây giờ chạy xuống yêu cầu của bạn:

• Không yêu cầu nồi hơi mới để thêm bot mới (ví dụ: không có tsconfig.json trên mỗi bot)

Để đạt được điều này sẽ yêu cầu tạo một số tập lệnh sẽ liệt kê thư mục / tập lệnh bot của bạn ... và thiết lập liên quan cho mỗi bot tsconfig.jsonvà chạy tsc. Trừ khi nó thực sự cần thiết, một thiết lập tối thiểu (mô tả ở trên) có thể là đủ.

• Sử dụng nhập cho các chức năng phổ biến để tránh xuất mã không sử dụng, nhưng sau đó ...

Trước tiên, hãy lưu ý rằng nếu bạn bắt đầu sử dụng bất kỳ mô-đun export/ importcâu lệnh nào, bạn sẽ cần thêm bên thứ 3 để đóng gói / treeshake để đạt được một đầu ra tệp duy nhất. Từ những gì tôi có thể thu thập được của Bot.land, các tập lệnh của bạn đang chạy trên máy chủ. Trừ khi deadcode có ảnh hưởng đến hiệu suất bot của bạn, tôi sẽ không thực sự bận tâm.

• Vẫn xuất tất cả các chức năng dưới dạng một tệp duy nhất ở định dạng cụ thể của Bot Land

Làm xong.

• Một bước xây dựng duy nhất tạo ra nhiều tệp đầu ra, một cho mỗi bot

Làm xong.

• Phần thưởng: tích hợp quá trình xây dựng với Mã VS. Hiện tại có một task.json nồi hơi tương ứng để xây dựng từng dự án con.

Các npmtập lệnh sẽ xuất hiện trong danh sách nhiệm vụ của vsc (ít nhất là chúng làm trong phần của tôi), do đó làm cho tasks.jsonkhông cần thiết.

Bạn thực sự có thể sử dụng tài liệu tham khảo dự án. Thực hiện theo các bước sau để có được kết quả giống như bạn nhận được cho các tệp gốc của mình, với tất cả các chức năng ở cấp cao nhất trong một tệp. Tuy nhiên, tôi không thể tìm thấy giải pháp chỉ nhập các chức năng cần thiết trong bot. Đó là, không sử dụng nhập khẩu và xuất khẩu.

Trong tsconfig.json của bạn ở thư mục gốc

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

Tiếp theo, trong thư mục lib của bạn, hãy thêm tsconfig.json như vậy

{
  "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"
  ]
}

Chúng ta cần thực hiện một vài điều chỉnh trong data.ts, Movement.ts và utils.ts để ts không làm phiền chúng tôi với các lỗi biên dịch.

dữ liệu

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

(...)

phong trào.ts

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

đồ dùng

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

Tiếp theo, chúng tôi thêm base.json ở thư mục gốc (tsconfig.json của các bot sẽ mở rộng nó).

cơ sở

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

và tsconfig.json của bot (thích ứng với bot)

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

Đó là nó. Bây giờ chỉ cần chạy

tsc -b