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 可能遇到的问题

 

posted @ 2020-04-04 14:19  郭溢才  阅读(441)  评论(0编辑  收藏