在自定义转换器之后，打字稿仍然使用对旧导入的引用

Question

我正在使用 CustomTransformer 从以下位置更新导入：

import { global_spacer_form_element } from '@patternfly/react-tokens';
export const disabledLabelClassNameEx = global_spacer_form_element.var;

到

import global_spacer_form_element from '@patternfly/react-tokens/dist/js/global_spacer_form_element';
export const disabledLabelClassNameEx = global_spacer_form_element.var;

但是，当与ts-loader 一起使用时，我得到以下输出（直接来自 ts-loader）：

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.disabledLabelClassNameEx = void 0;
const global_spacer_form_element_1 = __importDefault(require("@patternfly/react-tokens/dist/js/global_spacer_form_element"));
exports.disabledLabelClassNameEx = react_tokens_1.global_spacer_form_element.var;
//# sourceMappingURL=Recipient2.js.map

不是直接使用global_spacer_form_element，而是使用react_tokens_1.global_spacer_form_element。

我想 typescript 编译器用来构建 react_tokens_1 变量的转换器中缺少一些东西。

转换器在其访问者中执行以下操作（为了显示它所采用的路径，我正在简化转换器代码，完整代码可以查看here）：

const visitor: ts.Visitor = (node) => {
      if (ts.isSourceFile(node)) {
        return ts.visitEachChild(node, visitor, context)
      }
      
      if (!ts.isImportDeclaration(node) /* or if the lib name is not '@patternfly/react-tokens' */) {
        return node
      }

      // for simplicity assume we take all NamedImports and the only found is...
     const elements = ['global_spacer_form_element']
     const importPath = '@patternfly/react-tokens/dist/js/global_spacer_form_element'
     return elements.map((e) => {
       return ts.factory.createImportDeclaration(
         undefined,
         undefined,
         ts.factory.createImportClause(
           false,
           ts.factory.createIdentifier(e),
           undefined,
         ),
         ts.factory.createStringLiteral(importPath),
       )
     })
}

我的 tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "allowJs": true,
    "checkJs": false,
    "jsx": "react",
    "outDir": "./build",
    "removeComments": true,
    "pretty": true,
    "skipLibCheck": true,
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "noImplicitAny": false,
    "sourceMap": true,
    "resolveJsonModule" : true
  },
  "include": [
    "./src/**/*"
  ],
  "exclude": [
    "./node_modules/*",
    "**/*.js"
  ]
}

最后是ts-loader 配置：

{
  test: /src\/.*\.tsx?$/,
  loader: 'ts-loader',
  exclude: /(node_modules)/i,
  options: {
        getCustomTransformers: () => ({
            before: [
                tsImportPluginFactory({
                    libraryName: '@patternfly/react-tokens',
                    libraryDirectory: 'dist/js',
                   camel2DashComponentName: false
                })
            ]
        })
  }

知道我还需要更新什么或者我可以检查什么以确保这个转换器按预期工作吗？

edit：对旧导入的引用已经消失，但我之前没有注意到新导入也被转换：例如从foobar 到foobar_1。

Answer 1

TypeScript 编译器有四个主要阶段——解析、绑定、类型检查和发出。绑定是解决标识符之间关系的地方，但转换发生在“发射”阶段。所以当你转换的时候已经太晚了，编译器已经弄清楚了它要转换的标识符。

一种做你想做的事情的方法是遍历文件中的所有节点，找到与导入中的一个匹配的标识符，然后通过在访问者中返回 context.factory.createIdentifier(node.escapedText) 来重新创建这些标识符节点。这将使编译器在发射时保持原样。

但问题可能在于确定文件中的哪些标识符引用了命名的导入标识符。一般来说，我不建议在转换中使用类型检查器，因为当文件上发生多个转换时，它可能会导致意外结果，但是您可以先检查标识符的 escapeText 是否匹配，然后再检查如果typeChecker.getSymbolAtLocation(node)?.declarations[0] 等于在原始导入声明中找到的命名导出标识符。或者，我认为您必须实施自己的范围分析。