Screeps 使用 Grunt 打包 TypeScript 代

作者: HoPGoldy | 来源:发表于2019-09-24 12:02 被阅读0次

Screeps 使用 Grunt 打包 TypeScript 代
Screeps 使用 TypeScript 进行静态类型检查
<<Grunt vs Gulp>>有感
React-TypeScript
VUE目录以及webpack的常用操作
npm安装Grunt后却找不到命令
Screeps 使用 rollup 打包你的代码
grunt打包问题
使用Grunt 插件打包Electron Windows应用
使用grunt对css和js文件进行压缩

screeps 系列教程

！！！不推荐警告！！！

如果你是第一次打开这篇文章的话，我推荐使用 Screeps 使用 TypeScript 进行静态类型检查的方法来搭建你的 ts screeps 开发环境，这篇内容包含了更完善的构建流程，并介绍了在搭建过程中可能会遇到的一些问题。本篇内容虽然还可以使用，但是已经过时并不在维护。

开始构建 TS 项目！

接下来我们就从零开始，搭建一个用于 screeps 的 ts 项目。注意，下面的内容对于没有 ts 基础的同学可能有些难以理解，我会尽量对出现的名词进行解释。

1> 基本项目搭建

首先我们找个安静祥和的地方新建个名为ts-screeps的文件夹，或者其他你喜欢的名字，没影响。然后切换到文件夹内执行如下命令来进行基本的依赖安装，如果你安装很慢的话请自行百度"npm 切换国内源"：

// 初始化项目
npm init // 然后一路回车
// 安装项目依赖
npm install @types/lodash@3.10.1 @types/screeps @types/node grunt typescript grunt-ts
// 全局安装 grunt 命令行，如果之前安过可以跳过
npm install grunt-cli -g

先来简单介绍一下我们安装的依赖

@types/screeps screeps 游戏的声明文件, 注意，这个依赖并不是游戏本体，而仅仅是对游戏 api 的描述文件，下面lodash相同。
@types/lodash@3.10.1 lodash 的声明文件
@types/node node.js 的声明文件
grunt 自动化脚本
typescript ts 编译器本体
grunt-ts 使用 grunt 进行 ts 自动编译的任务
grunt-cli 可以使用grunt命令

这里多解释下上面安装的几个@types声明文件，由于 ts 带有静态类型检查，而如何让 ts 编译器知道我们使用的第三方包的类型呢？就是通过安装这些@types声明文件。并且如果你使用同样由 ts 开发的VScode进行代码编写时，VScode还能自动根据这些安装的声明文件为你 提供代码补全。

安装完成之后我们的项目目录是这样的：

项目目录

2> 创建 Grunfile 自动化脚本

接下来我们配置 ts 编译任务，在和package.json同级的目录下新建Gruntfile.js文件，并填入如下内容：

module.exports = function(grunt) {
    // 从 npm 载入任务
    grunt.loadNpmTasks("grunt-ts")
    // 配置任务
    grunt.initConfig({
        // typescripts 编译任务
        'ts': {
            default : {
                options: {
                    sourceMap: false,
                    // 编译到的目标版本
                    target: 'es5',
                    rootDir: "src/"
                },
                // 要进行编译的目录及文件
                src: ["src/*.ts"],
                // 编译好的文件的输出目录
                outDir: 'dist/'
            }
        }
    })
    // 将 ts 编译任务注册到默认执行命令
    grunt.registerTask('default',  [ 'ts' ])
}

简单介绍一下，Gruntfile是定义本项目中的自动化脚本如何执行。里边分为三部分：

载入 ts 编译任务 grunt.loadNpmTasks
配置 ts 编译任务 grunt.initConfig
将编译任务注册到默认命令 grunt.registerTask

怎么执行任务我们一会再讲，我们先来新建源代码的存放目录。

3> 新建代码存放目录

在项目目录下新建名为src的文件夹，我们的 ts 源文件都要放到这里。如果不想叫这个名字的话请同步修改Gruntfile.js里 ts 编译任务中的rootDir和src属性。

新建完文件夹后我们写一个最基本的 ts screeps 入口文件main.ts：

// screeps 代码入口
module.exports.loop = function(): void {
    console.log(sayHello('world!'))
}

// 定义一个 ts 风格的方法
function sayHello(str: string): string {
    return 'hello' + str
}

可以看到，代码中定义的函数通过:字符指定了参数和返回值的类型，想简单了解一下 ts 的语法可以参考《ts 官方文档 - 五分钟上手》。

到目前为止，我们的项目目录就变成了这个样子：

项目路径

ok, 完事具备，接下来我们就可以动手编译了！

4> 编译项目！

我们在项目根目录下打开控制台，执行如下命令，就可以看到编译任务开始执行了：

grunt

等待几秒钟之后，就可以看到编译完成了，控制台输出如下：

Running "ts:default" (ts) task
Compiling...
Using tsc v3.6.3

TypeScript compilation complete: 3.57s for 1 TypeScript files.

Done.

这时候我们就可以看到项目根目录下自动生成了一个名为dist的文件夹，里面就是编译好的文件：

main.js

module.exports.loop = function () {
    console.log(sayHello('world!'));
};
function sayHello(str) {
    return 'hello' + str;
}

可以看到 ts 把我们的源码中的类型定义剔除了并转换到了我们指定的es5版本(这个转换不太看得出来，不过了解就好 )。接下来，我们只需要通过grunt-screeps或者grunt-contrib-copy任务将其提交到游戏服务器即可。至于提交如何实现请查看 screeps 配置无需游戏客户端的开发环境，文中还介绍了如何在文件保存时自动进行编译。

优化异常追踪栈

由于 ts 会将所有代码都打包进一个文件，所以 当你的代码报错后显示的异常调用栈实际上是编译后的 main.js 中的位置，而不是你源代码中的实际报错位置。这也就导致了报错后需要对照着编译后的代码去确定到底是那里出现了问题，当你的代码增多到几千行后这个体验会非常糟糕，那么能不能解决这个问题呢？

是的你可以，通过一些配置手段和额外代码，你可以让错误堆栈追踪你源代码的信息而不是编译后的代码。但是，想这么做依旧有一定的难度，并且会不可避免的消耗你那么一丢丢的 cpu。所以为了简单起见，本文不会加入调试优化的内容。

如果你确实有兴趣的话。你可以按照下面两个链接来升级你的项目：