时间戳

首页 > 解决方案 > 如何使 tsconfig.json 路径别名在 Razzle 项目中工作？

typescript - 如何使 tsconfig.json 路径别名在 Razzle 项目中工作？

问题描述

我正在将一个项目从 react-app-rewired 迁移到 Razzle。

tsconfig.json 是这样的：

{
  "compilerOptions": {
    "target": "ES6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strictNullChecks": true,
    "skipLibCheck": true,
    "baseUrl": "src",
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["src"]
}

那个部分

"paths": {
  "@/*": ["./*"]
}

在我的情况下不起作用。

这是在我的 package.json 文件中： "start": "BROWSER=chromium concurrently \"npm run start:tsc\" \"razzle start\"",

我运行 npm start 并在客户端编译错误部分收到此消息：

Cannot find module '@/redux/authSlice'.

我认为相关的依赖项是：

"razzle": "4.0.4",
"razzle-dev-utils": "4.0.4",

我也尝试将以下内容放入我的razzle.config.js文件中，但没有成功：

const defaultModify = ({
  env: { target, dev },
  webpackConfig: config,
  webpackObject: webpack,
}) => {
  config.resolve.alias = {
    "@/": "src/",
  };
  return config;
};

module.exports = {
  modifyWebpackConfig: ({
    env: { target, dev },
    webpackConfig,
    webpackObject,
  }) => {
    const defaultConfig = defaultModify({
      env: { target, dev },
      webpackConfig,
      webpackObject,
    });
    return defaultConfig;
  },
};

调试此问题的下一步是什么？我该如何解决这个问题？

谢谢！

标签： typescriptaliastsconfigtsconfig-pathsrazzle

解决方案

看起来你想使用这个 razzle 功能： https ://razzlejs.org/docs/customization#aliased-paths-modules

推荐阅读