screeps游戲的typescript開發環境搭建

此教程介紹了如何為screeps搭建一個基本的typescript開發環境，配置使用rollup進行腳本自動化，完成typescript文件編譯、目標js文件提交到screeps服務器，最后通過一個HelloWorld來進行測試。

操作系統：windows

文本編輯器：vscode

1.安裝

1.1 安裝Node.js和npm

前往Node.js官網下載安裝包，安裝包中已經包含了npm。

1.2 安裝yarn

新建一個文件夾作為項目路徑，在命令行終端使用以下命令安裝yarn。

npm install yarn -g

 

1.3 安裝rollup以及依賴

yarn add rollup --save-dev 
yarn add typescript ts-loader rollup-plugin-typescript2 --save-dev
yarn add awesome-typescript-loader --save

首先，第一行安裝了rollup工具，第二和第三行添加typescript依賴以進行ts文件編譯，最后一行安裝了screeps依賴，用於上傳編譯后的文件。

為了在本地使用typescript為screeps編寫腳本，還需要安裝必要的typescript聲明。

npm install @types/lodash @types/screeps @types/node

 

2.配置

2.1 在rollup中使用screeps插件

rollup有現成的screeps腳本提交模塊，比如rollup-plugin-screeps，但是因為這個插件是作者18年提交的，好像和當前版本的rollup有些不兼容，按照文檔進行提交時會有如下警告，總是提交不上去，一直停在這不動。

 

按照提示，我們打開node_module中的rollup-plugin-screeps\dist路徑下的index.js和rollup-screeps-plugin.js文件，找到其中的ongenerate鈎子改為generateBundle，同樣把onWrite改為WriteBundle。

這時運行依然會報錯，因為該插件在回調中調用了uploadSource函數，而該函數中用到的option.file在現在的rollup版本中已經找不到了，因此會報type error，我們要做的很簡單，把option.file直接改為main.js的相對路徑，比如"./dist/main.js"。但是這樣日后修改起來總是麻煩，因此可以借用config配置文件來傳參，從下圖可以看出當我們傳入config為配置文件路徑時，這里就會調用loadConfigFile將配置文件信息讀進來，我們可以在配置文件里添加一個uploadfile屬性，並在這里用上。

 

插件源代碼

 

 

修改

 screeps.json的配置可以參考2.4中所示

該插件從當前路徑的screeps.json中讀取賬戶信息，並向服務器提交配置的文件，因為rollup可將tsc編譯的多個js文件打包成一個main，所以我們不需要為每個module再獨立配置。

2.2 rollup.config.js配置

為了使用rollup，我們需要新建一個rollup.config.js文件，通過這個文件來為rollup設置任務。

 
           
           
             "use strict"; 
            
           
               
            
           
             import typescript from "rollup-plugin-typescript2"; 
            
           
             import screeps from "rollup-plugin-screeps"; 
            
           
 
           
 
           
 
           
 
           
             export default { 
            
           
                 input: "src/main.ts", 
            
           
 
           
 
           
 
           
                 plugins: [ 
            
           
                     typescript({tsconfig: "./tsconfig.json"}), 
            
           
                     screeps({configFile: "./screeps.json"}) 
            
           
                 ], 
            
           
 
           
 
           
 
           
                 treeshake: false, 
            
           
 
           
 
           
 
           
                 output: { 
            
           
                     file: "./dist/main.js", 
            
           
                     format: "cjs", 
            
           
                     sourcemap: false 
            
           
                 }, 
            
           
 
           
 
           
 
           
             } 
            
           
         

 

2.3 tsconfig.json配置

為了使用typescript，需要新建一個tsconfig.json文件為ts編譯器添加配置。

{
    "compilerOptions": {
      "allowJs": true,
      "target": "es2017",
      "moduleResolution": "Node",
      "newLine": "CRLF",
      "outDir": "tsc-out",
      "baseUrl": "src/",
      "sourceMap": false,
      "strict": true,
    },
    "include": [
      "src/**/*"
    ],
    "exclude": [
      "node_modules"
    ],
  }
  
  

 

2.4 從文件導入賬戶信息

在配置中我們沒有直接將screeps的賬戶信息寫入mycommit.js中，而是通過require("./screeps.json")來從名為screeps.json的文件中讀取賬戶信息再進行使用，這樣有一個好處是修改賬戶信息的時候直接修改screeps.json即可，不用到處去找。

示例如下：

 

[

    {

        "email": "EMAIL",

        "password": "PASSWORD",

        "hostname": "screeps.com",

        "port": 443,

        "path": "'/api/user/code'",

        "branch": "BRANCH",

　　　　　"uploadfile": "./dist/main.js"

    }

]

 

我們可以照例子添加多個配置。

 

3.測試

3.1 HelloWorld測試

在項目路徑下新建src路徑，在src中添加兩個文件：main.ts、sayHello.ts，分別為他們添加以下代碼

//main.ts
import sayHello from './sayHello';

module.exports.loop = function(): void{
    sayHello("world");
}

//sayHello.ts
export default function(name : String) {
    console.log("Hello " + name + "!");
}

終端在項目路徑執行

rollup -c

rollup將會對ts文件編譯，接着上傳到對應的branch中，

 

 

3.2 可能遇到的問題