TypeScript 프로젝트에서 Alias 설정 방법 - prgrms-web-devcourse/Team_Alchomist_ShakeNMatch_FE GitHub Wiki

추가적인 경로 설정

// tsconfig.json
{
"extends": "./tsconfig.path.json",
...
}

// tsconfig.path.json
{ 
  "compilerOptions": { 
    "baseUrl": ".", 
    "paths": { // Alias 경로 별칭 및 실제 경로
      "@base/*": [
        "src/components/base/*" ]
    } 
  } 
}

craco를 사용하지 않을경우, module-alias 패키지를 이용하여 추가적인 세팅이 필요하다.

• craco가 아닌 경우 alias 설정 방법: 한글 링크 영문 링크

Craco를 사용할경우, craco-alias 사용하기

npm craco-alias 링크

// craco.config.js
export default {
 ...
 plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        baseUrl: './src',
        tsConfigPath: './tsconfig.path.json'
      }
    }
  ],
  ...
}

storybook은 추가적으로 alias 설정이 필요하다. 아래와 같이 설정해주면 된다.

StoryBook Alias 설정 방법

// main.js

export default {
  "webpackFinal": async (config) => {
    config.resolve.alias["@base"] = path.resolve(__dirname, "../src/components/base");
    config.resolve.alias["@components"] = path.resolve(__dirname, "../src/components");
    config.resolve.alias["@hooks"] = path.resolve(__dirname, "../src/hooks");
    config.resolve.alias["@utils"] = path.resolve(__dirname, "../src/utils");
    config.resolve.alias["@"] = path.resolve(__dirname, "../src");
    return config;
  },
  "typescript": {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
    },
  },
  ...
}