如何使用 bazel/webpack 设置绝对导入？答案

【问题标题】：How to setup absolute imports with bazel/webpack?如何使用 bazel/webpack 设置绝对导入？
【发布时间】：2020-09-30 18:05:05
【问题描述】：

我想从我的 repo 的一个部分在另一部分导入一个打字稿模块，而在我的导入中没有一堆“../..”以返回我的 bazel 工作区的根文件夹。如何为 webpack 设置绝对导入（相对于我的工作区）？我需要在 webpack.config.js 中设置一些东西吗？如果有，是什么？

说明以下问题的最小设置：

文件夹结构

folder1/
    moduleA.ts
    BUILD
folder2/
    moduleB.ts
    BUILD
WORKSPACE

工作空间

workspace(
    name = "myworkspace",
)

...

* **moduleA.ts ***

// TS COMPILER CAN FIND THIS BUT WEBPACK CAN'T FIND THIS
import { thing } from "myworkspace/folder2/moduleB";  

...

文件夹 1/BUILD

load("@npm_bazel_typescript//:index.bzl", "ts_library")
load("@npm//webpack-cli:index.bzl", webpack = "webpack_cli")

ts_library(
    name = "moduleA",
    srcs = ["moduleA.ts"],
    deps = [
        "//folder2:moduleB",
    ],
)

filegroup(
    name = "moduleA.js",
    srcs = [
        "moduleA",
    ],
    output_group = "es6_sources",
    visibility = ["//visibility:public"],
)

webpack(
    name = "bundle",
    outs = ["app.bundle.js"],
    args = [
        "$(locations :moduleA.js)",
        "--config",
        "$(execpath //:webpack.config.js)",
        "-o",
        "$@",
    ],
    data = [
        ":moduleA.js",
        "//:webpack.config.js",
        "@npm//:node_modules",
    ],
    visibility = ["//visibility:public"],
)

【问题讨论】：

你解决了吗？介意分享一下你做了什么吗？
是的——有点。在此处查看此线程：github.com/bazelbuild/rules_nodejs/issues/1952

标签： javascript typescript webpack bazel bazel-rules-nodejs

【解决方案1】：

已解决here。

事实证明，文件组没有从 moduleA 推断出 //folder2:moduleB 需要被包含传递。将 //folder2:moduleB 添加到文件组 srcs 解决了我的问题。

【讨论】：