babel-plugin-module-resolver добавляет дополнительные ../ к пути

Question 1

Хотя я знаю, что Babel способен транспилировать сам TypeScript, у меня было достаточно странных проблем, которые я хотел бы сначала транспилировать TypeScript-> JS, а затем запустить на нем Babel.

Мои файлы tsconfig.json работают должным образом. Когда я компилирую свой TypeScript (из папки ./src относительно пути babel.config.json), он выводится в папку ./build. У меня есть Babel, настроенный на то, чтобы брать то, что находится в папке ./build, и выводить в папку ./dist.

Вывод TSC показывает import {bar} from 'foo' и import {thing} from 'foo/util', как и ожидалось. Но вывод Babel выглядит как ../../../libfoo/libfoo.js, хотя должен быть ../../libfoo/libfoo.js

Независимо от того, что я пытаюсь сделать с root/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
}

javascript babeljs

0

user3534080 10 Апр 2020 в 04:12

Answer

Что ж, я нашел решение, которое на самом деле не решает проблему, но заставляет ее работать.

Структура моих файлов примерно такая:

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

Когда babel компилирует код, импорт db/connect в src/index.ts начинается с этого:

import ... from "db/connect"

К этому:

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

Чтобы решить эту проблему, я просто добавляю /dist к путям в .babelrc.

Перед:

[
   "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 не влияет на требуемый путь, поэтому я просто удалил его.

Это не устраняет проблему, но заставляет ее работать.

Надеюсь, это поможет, удачи! :)

2

user13158171user13158171 28 Ноя 2020 в 05:25

Question 2