Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโ€™ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Absolute path in VSCode with TypeScript, CRA, Jest (feat. craco) #60

Open
JaeYeopHan opened this issue Aug 5, 2019 · 1 comment

Comments

@JaeYeopHan
Copy link
Owner

commented Aug 5, 2019

Description

Configure Absolute path!!๐Ÿš€

โ›‘ Based "react-scripts": "3.0.1"

TL;DR

Env

Configuration

craco.config.js

const resolve = arg => path.resolve(__dirname, arg)

module.exports = function() {
  return {
    webpack: {
      alias: {
        '@': resolve('src'),
      },
    },
    jest: {
      configure: {
        moduleNameMapper: {
          '^@/(.*)$': '<rootDir>/src/$1',
        },
      },
    },
  }
}

tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

tsconfig.json

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "plugins": [
      {
        "transform": "ts-optchain/transform"
      }
    ]
  },
  "include": ["src/*", "src/__tests__"]
}

Mine ๐Ÿ’ฃ

1. moduleNameMapper

CRA๋กœ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์œผ๋กœ ์„ธํŒ…์„ ํ•  ๊ฒฝ์šฐ, jest config๋ฅผ package.json์—์„œ override ํ•  ๋•Œ moduleNameMapper ์†์„ฑ์„ override ํ•  ์ˆ˜ ์—†๋‹ค. override ํ•˜๋ ค๋ฉด eject๋ฅผ ํ•˜๋ผ๊ณ  ํ•œ๋‹ค. ์™œ ๋•Œ๋ฌธ์— ์ด ์ค‘์š”ํ•œ ์†์„ฑ์„ ๋ง‰์•„๋†“์•˜๋Š”์ง€ ์ดํ•ด๊ฐ€ ๋˜์ง€ ์•Š๋Š” ๋ถ€๋ถ„. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— craco ์™€ ๊ฐ™์€ cra override tool์ด ํ•„์ˆ˜.

2. With Jest

test directory์— ๋Œ€ํ•œ ๋ถ€๋ถ„์„ ์ถ”๊ฐ€์ ์œผ๋กœ ๋ช…์‹œํ•ด์•ผ ํ•œ๋‹ค๋Š” ์ ์—์„œ ๊ธด ์‹œ๊ฐ„ ์‚ฝ์งˆ์„ ํ–ˆ๋‹ค. ํ…Œ์ŠคํŠธ ๋””๋ ‰ํ† ๋ฆฌ๊ฐ€ ๋‹ค๋ฅด๋‹ค๋ฉด include์— ์ถ”๊ฐ€ํ•ด์ค˜์•ผ ํ•œ๋‹ค.

3. Customize tsconfig.json

tsconfig.json ์—์„œ path ๊ด€๋ จํ•œ ์†์„ฑ์„ ๋ฐ”๋กœ ์ž‘์„ฑ์„ ํ•˜๋ฉด cra๊ฐ€ ์—†์• ๋ฒ„๋ฆฌ๊ณ  tscofnig.json์„ ๋‹ค์‹œ ์ƒ์„ฑํ•œ๋‹ค. ์ด ๋ถ€๋ถ„๋„ ์–ด๋–ค ์Šคํฌ๋ฆฝํŠธ์—์„œ ์ฒ˜๋ฆฌํ•˜๋Š”์ง€ ์ •ํ™•ํžˆ ํŒŒ์•…ํ•˜์ง€๋Š” ๋ชปํ–ˆ์ง€๋งŒ ์ด๋ฅผ ์šฐํšŒํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ์กด์žฌํ•œ๋‹ค. ๋ณ„๋„ ํŒŒ์ผ๋กœ ์ •์˜ ํ›„, extends๋ฅผ ํ•ด์ค˜์•ผ ํ•œ๋‹ค.

4. import index

@api์™€ ๊ฐ™์ด directory๋ฅผ direct๋กœ alias ์ง€์ •ํ•  ๊ฒฝ์šฐ index๋ฅผ ๋ช…์‹œ์ ์œผ๋กœ import ํ•ด์ค˜์•ผ ํ•œ๋‹ค. (์ด ๋ถ€๋ถ„์€ ๊ฒ€ํ† ๊ฐ€ ๋” ํ•„์š”ํ•˜์ง€๋งŒ directory๋กœ ์ธ์‹ํ•˜์—ฌ index๋ฅผ ์•”๋ฌต์ ์œผ๋กœ importํ•  ์ˆ˜ ์—†๋Š” ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒ๋œ๋‹ค.)

Tips

  • tsconfig๊ณผ webpack alias๋ฅผ ๋‘˜ ๋‹ค ์ง€์ •ํ•ด์ค˜์•ผ ํ•˜๋ฉฐ ์ด ๋ถ€๋ถ„ ํฌ๋งท์ด ๋‹ค๋ฆ„์— ์œ ์˜ํ•ด์•ผ ํ•œ๋‹ค.
@JaeYeopHan

This comment has been minimized.

Copy link
Owner Author

commented Aug 9, 2019

VSCode version: 1.37.0 Absolute Path Bug

๋ชจ๋“  ์ง€๋ขฐ๋ฅผ ๋‹ค ์ฐพ์€ ์ค„ ์•Œ์•˜๋Š”๋ฐ ๋˜ ๋ฐŸ์•„๋ฒ„๋ ธ๋‹ค.

์ƒˆ๋กญ๊ฒŒ ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜๊ณ  ๋‚˜์„œ ์—ฌ๋Ÿฌ module์„ importํ•˜๋Š”๋ฐ ๋ถ„๋ช… ์˜คํƒ€๋„ ์—†๋Š”๋ฐ ์ ˆ๋Œ€ ๊ฒฝ๋กœ๋กœ import๊ฐ€ ๋˜์ง€ ์•Š๋Š”๋‹ค.

Screen Shot 2019-08-09 at 1 16 53 PM

์–ด๋–ค ํŒŒ์ผ์—์„œ๋„ import ํ•˜์ง€ ์•Š์€ A.ts (or A.tsx)์—์„œ absolute path ๋กœ importํ•˜๋ฉด ์œ„์™€ ๊ฐ™์€ ์—๋Ÿฌ๋ฉ”์„ธ์ง€๊ฐ€ ๋…ธ์ถœ๋œ๋‹ค. (Cannot find module '...')

์ฆ‰ ์–ด๋–ค ํŠน์ • ํŒŒ์ผ์—์„œ import A from '.@/โ€ฆ/A'๋ฅผ ํ•ด์ฃผ๋ฉด A ํŒŒ์ผ์—์„œ ์ ˆ๋Œ€ ๊ฒฝ๋กœ๋กœ import๊ฐ€ ๊ฐ€๋Šฅํ•ด์ง„๋‹ค.

์–ด๋–ค ํŒŒ์ผ์—์„œ๋„ import ํ•˜์ง€ ์•Š์€์ด ๋ฌด์—‡์„ ์˜๋ฏธํ•˜๋Š” ๊ฒƒ์ผ๊นŒ

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
1 participant
You canโ€™t perform that action at this time.