最近想用TypeScript来重构后台，由于Node版本是8+，能够直接支持async、await，于是乎就想直接转换，使用的tsconfig.json内容如下:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es2017",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017"
]
}
}
这么一看似乎没问题，那么我们写个例子来测试一下：
import * as Koa from 'koa';
const app: Koa = new Koa();
app.use(async (ctx: Koa.Context, next: () => Promise<any>) => {
await next();
});
app.use(async(ctx: Koa.Context, next: () => Promise<any>) => {
ctx.body = 'Hello There';
});
const port = 11001;
app.listen(port);
console.log(`在${port}监听`);
经过转换后的结果是:
import * as Koa from 'koa';
const app = new Koa();
app.use(async (ctx, next) => {
await next();
});
app.use(async (ctx, next) => {
ctx.body = 'Hello There';
});
const port = 11001;
app.listen(port);
console.log(`在${port}监听`);
看着似乎没问题，但是仔细看还是有问题的，因为node8其实是不支持import这样的语法的。
那么怎么办呢？
module
机智的我们可能回想起，tsconfig.json中其实有一项是配置模块的类型的: module
而node常用的就是commonjs。
所以加上一句就可以了:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es2017",
"typeRoots": [
"node_modules/@types"
],
"module": "commonjs",
"lib": [
"es2017"
]
}
}
再次打包，就得到了我们想要的结果了:
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const Koa = require("koa");
const app = new Koa();
app.use(async (ctx, next) => {
await next();
});
app.use(async (ctx, next) => {
ctx.body = 'Hello There';
});
const port = 11001;
app.listen(port);
console.log(`在${port}监听`);
压缩
这个OK了，下一步优化就是压缩了，似乎没有问题了，但是当我们使用uglifyjs去进行压缩的时候，突然报了个错:
GulpUglifyError: unable to minify JavaScript
无法压缩。
google了一番，发现是uglify不支持es2016等，所以需要先经过babel转换，然后在Uglify。
这就有点搞笑了，我本来就想用node8的新特性，这么一转，岂不是回去了。
于是，搜索了一番，发现了uglify-es插件，这个插件专门就是解决这个问题了，好了后台问题暂时都解决了，接下来开始码代码了。
