如何在保留本机异步/等待的同时使用浏览器化

Question

我正在使用npm browserify将打字稿代码和Google protobuf lib组合到一个js中。这是必需的，因为谷歌protobuf没有适当的浏览器ES6样式导入支持(参见谷歌Protobuf JS(

browserify --standalone -o {file} {input files}

异步/等待函数使用 __awaiter 函数进行转换，但我想从任何转换中保留 (es8( 它们，而不是使用本机异步/等待

我尝试搜索要传递给浏览器命令的任何参数，该命令可以排除异步/等待转换

示例代码：

打字稿代码：

public async Start (milliseconds: number):
Promise<number>
{
  await this.Clear();
  return calc(milliseconds);
}

当前浏览器化输出：

 Start(milliseconds = null) {
        return __awaiter(this, void 0, void 0, function* () {
            yield this.Clear();
            return calc(milliseconds);
        });
 }

所需输出(异步/等待保留(：

async Start(milliseconds = null) {
        await this.Clear();
        return calc(milliseconds);
}

TypeScript 编译的代码在 es8 config 中是正确的，但是当传递给 browserify 时，它会添加这些不需要的额外功能。感谢这方面的任何帮助

Answer 1

如果您使用的是 TypeScript 和 browserify，则在捆绑代码时，您可能希望使用 tsify 作为浏览器化的插件。您可以在命令行上执行此操作：

 browserify js/main.ts -p [ tsify -p tsconfig.json ] -o output/main.js

在我的tsconfig.json中使用目标ES2018在浏览器(main.js(中编译和捆绑代码：

 async logIn(password) {
    const req = {
        password: password
    };
    const response = await window.fetch(`/something/login`, {
        method: 'POST',
        // headers: headers,
        body: JSON.stringify(req)
    });
    const resp = await response.json();
    return new Promise((resolve, reject) => {
        if (response.status === 200) {
            resolve(resp.token);
        }
        else {
            reject('some error...');
        }
    });
}

现在，如果我将 tsconfig.json 中的目标更改为 es5，浏览器中编译和捆绑的代码 (main.js( 如下所示：

    SomeController.prototype.logIn = function (password) {
    return __awaiter(this, void 0, void 0, function () {
        var req, response, resp;
        return __generator(this, function (_a) {
            switch (_a.label) {
                case 0:
                    req = {
                        password: password
                    };
                    return [4 /*yield*/, window.fetch("/something/login", {
                            method: 'POST',
                            // headers: headers,
                            body: JSON.stringify(req)
                        })];
                case 1:
                    response = _a.sent();
                    return [4 /*yield*/, response.json()];
                case 2:
                    resp = _a.sent();
                    return [2 /*return*/, new Promise(function (resolve, reject) {
                            if (response.status === 200) {
                                resolve(resp.token);
                            }
                            else {
                                reject('some error...');
                            }
                        })];
            }
        });
    });
};