Skip to main content

TypeScript aliases

TypeScript 别名默认不受支持，因为我们使用的 ESBuild Webpack 加载器不支持它们。 但是，您可以通过修改 Webpack 配置来使其生效。

假设您有一个文件：

 └── src/
   ├── lib/
   │   ├── one.ts
   │   ├── two.ts
   ├── Root.tsx
   └── index.ts
 └── src/
   ├── lib/
   │   ├── one.ts
   │   ├── two.ts
   ├── Root.tsx
   └── index.ts

并且您的 tsconfig.json 包含以下 paths：

json
{
  "compilerOptions": {
    "paths": {
      "lib/*": ["./src/lib/*"]
    }
  }
}
json
{
  "compilerOptions": {
    "paths": {
      "lib/*": ["./src/lib/*"]
    }
  }
}

您可以将别名添加到 Webpack，但是您需要手动添加每个别名：

ts
import path from "path";
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig((config) => {
  return {
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...(config.resolve?.alias ?? {}),
        lib: path.join(process.cwd(), "src", "lib"),
      },
    },
  };
});
ts
import path from "path";
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig((config) => {
  return {
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...(config.resolve?.alias ?? {}),
        lib: path.join(process.cwd(), "src", "lib"),
      },
    },
  };
});

请记住，在 Node.JS API 中，配置文件不适用，因此您需要将 Webpack 覆盖项也添加到 bundle() 和 deploySite() 函数中。

自动同步 Webpack 和 TypeScript 别名​

为了避免在 Webpack 覆盖项和 tsconfig.json 中重复别名，您可以安装 tsconfig-paths-webpack-plugin 并使用它：

ts
import { Config } from "@remotion/cli/config";
import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
Config.overrideWebpackConfig((config) => {
  return {
    ...config,
    resolve: {
      ...config.resolve,
      plugins: [
        ...(config.resolve?.plugins ?? []),
        new TsconfigPathsPlugin(),
      ],
    },
  };
});
ts
import { Config } from "@remotion/cli/config";
import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
Config.overrideWebpackConfig((config) => {
  return {
    ...config,
    resolve: {
      ...config.resolve,
      plugins: [
        ...(config.resolve?.plugins ?? []),
        new TsconfigPathsPlugin(),
      ],
    },
  };
});

参见​