首页 > 解决方案 > 使用@bazel/typescript:0.37 构建时,打字稿“相对导入”会变成“绝对导入”

问题描述

我不确定这是一个typescript问题还是bazel编译 typescript 的方式,但总而言之,问题是如果我编译一个包含“相对导入”的 typescript 文件,它在编译为javascript. 我正在使用 ts_library 规则。

引导程序.ts

import { Stack, App, StackProps } from '@aws-cdk/core';
import { StaticSite } from './resources/static-site';

class MyStaticSiteStack extends Stack {
  constructor(parent: App, name: string, props: StackProps) {
    super(parent, name, props);

    new StaticSite(this, 'StaticSite', {
      domainName: this.node.tryGetContext('domain'),
      siteSubDomain: this.node.tryGetContext('subdomain')
    });
  }
}

const app = new App();

new MyStaticSiteStack(app, 'MyStaticSite', { env: { region: 'us-east-1' } });

tsconfig

{
  "compilerOptions": {
    "outDir": "./dist",
    "module": "commonjs",
    "moduleResolution": "node",
    "strict": true,
    "target": "es2015",
    "lib": ["es2015.promise", "es5", "es6", "es2017.object", "dom"],
    "noImplicitAny": false,
    "experimentalDecorators": true,
    "strictNullChecks": false,
    "baseUrl": "./",
    "rootDir": "./",
    "paths": {
      "@bhavnastitch/*": ["./*"],
      "@bh-orders-app/*": ["./bh-orders-app/*"]
    }
  },
  "exclude": ["node_modules"]
}

构建文件

package(default_visibility=["//visibility:public"])
load("@npm_bazel_typescript//:index.bzl", "ts_library")

alias(
    name = "tsconfig.json",
    actual = "//:tsconfig.json",
)
ts_library(
    name = "src",
    srcs = glob(["**/*.ts"]),
    tsconfig= ":tsconfig.json",
    deps= [
        "@npm//@aws-cdk/aws-s3",
        "@npm//@aws-cdk/core"
    ]
)
compiled file looks like this:
(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define("backend/bh-orders-app/bootstrapper", ["require", "exports", "@aws-cdk/core", "backend/bh-orders-app/resources/static-site"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const core_1 = require("@aws-cdk/core");
    const static_site_1 = require("backend/bh-orders-app/resources/static-site");
    class MyStaticSiteStack extends core_1.Stack {
        constructor(parent, name, props) {
            super(parent, name, props);
            new static_site_1.StaticSite(this, 'StaticSite', {
                domainName: this.node.tryGetContext('domain'),
                siteSubDomain: this.node.tryGetContext('subdomain')
            });
        }
    }
    const app = new core_1.App();
    new MyStaticSiteStack(app, 'MyStaticSite', { env: { region: 'us-east-1' } });
});

这就是我得到的,但是当我运行它时它不会工作,因为它不知道backend/bh-orders-app/resources/static-site指的是什么。

目录结构

backend--
         |--bh-order-app
            |--resources
               |--static-site.ts
            |--bootstrapper.ts <---- File that I have provided example for.
            |--BUILD
         |-WORKSPACE

标签: javascripttypescriptbazeltsconfig

解决方案


推荐阅读