babel-plugin-module-resolver将额外的../添加到路径

Question

虽然我知道Babel能够转换TypeScript本身，但我已经遇到了足够多的奇怪问题，我想先转换TypeScript->JS，然后在上面运行Babel。

我已经让我的tsconfig.json文件正常工作了。当我编译我的TypeScript (从相对于babel.config.json路径的./src文件夹)时，它输出到一个./build文件夹。我将Babel设置为获取./build文件夹中的内容并输出到./dist文件夹。

TSC的输出如预期的那样显示了import {bar} from 'foo'和import {thing} from 'foo/util'。但是Babel的输出看起来像../../../libfoo/libfoo.js，而实际上它应该是../../libfoo/libfoo.js

无论我如何尝试根/cwd，我似乎都不能让额外的../消失。我已经设法让它消失了几次，但后来我在不更改babel配置的情况下进行了重建，它又回来了。

我的babel.config.json当前是这样的：

{
    "presets": [
        ["@babel/preset-env", {"targets": {
            "node": true,
            "electron": "80"
        }}],
        ["@babel/preset-typescript", { "onlyRemoveTypeImports": true }]
    ],
    "plugins": [
        ["babel-plugin-module-resolver", {
            "alias": {
                "^foo/(.+)": "./libfoo/\\1.js",
                "^foo$": "./libfoo/libfoo.js"
            }
        }],
        ["@babel/plugin-transform-modules-umd"],
        ["@babel/plugin-transform-typescript", {
            "allowNamespaces": true,
            "allowDeclareFields": true,
            "onlyRemoveTypeImports": true
        }],
        ["@babel/plugin-proposal-pipeline-operator", { "proposal": "fsharp" }],
        "@babel/plugin-proposal-nullish-coalescing-operator",
        "@babel/plugin-proposal-optional-chaining",
        "@babel/plugin-proposal-do-expressions",
        "@babel/plugin-proposal-logical-assignment-operators",
        "@babel/plugin-proposal-partial-application",
        ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-proposal-throw-expressions",
        "@babel/plugin-proposal-export-default-from",
        "@babel/plugin-proposal-export-namespace-from",
        "@babel/plugin-proposal-function-bind"
    ],
    "sourceMaps": true
}

Answer 1

好吧，我找到了一个解决方案，它并没有真正解决这个问题，但让它正常工作。

我的文件结构是这样的：

|-dist
|-src
  |-db
     |-connect
        |-index.ts
  |-index.ts
|-.babelrc

当巴别塔编译代码时，在src/index.ts中导入db/connect，从这个开始：

import ... from "db/connect"

要这样做：

var _connect = require("../db/connect");

为了解决这个问题，我只需在.babelrc中的路径中添加/dist

之前：

[
   "module-resolver",
      {
         "root": ["./"], # or ["src"] or "src" or ["./src"] or "./src" or any way you can imagine
         "alias": {
            "db": "./db",
         }
      }
   }
]

之后：

[
   "module-resolver",
      {
         "alias": {
            "db": "./dist/db",
         }
      }
   }
]

而导入现在是：

var _connect = require("../dist/db/connect");

正如您所说，root不会影响请求路径，所以我只是删除了它。

这不能解决问题，但可以使其正常工作。

希望它能帮上忙，祝你好运！:)