[筆記] Create-React-App TypeScript 加入 webpack alias 別名方法 @地瓜大的飛翔旅程

章節連結

Create React App 由於其 Webapck 沒有暴露給使用者設定的影響，所以在別名 alias 設置上沒有原生的方法可達成。這邊筆記下實作步驟，並通過 TypeScript 的檢驗。

內容

1. 先用指令安裝 craco yarn add -D craco

2. 將你的 package.json 中的 react-scripts 都替換成 craco

3. 在專案根目錄，建立 craco.config.ts

import { resolve } from 'path';

module.exports = {
  webpack: {
    alias: {
      '@': resolve(__dirname, 'src/'),
    },
  },
};

import { resolve } from 'path';

module.exports = {

webpack: {

alias: {

'@': resolve(__dirname, 'src/'),

};

tsconfig.json，要讓其可以辨認你的 alias

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["node"],
    ......<略>
  }
}

{

"compilerOptions": {

"baseUrl": "./",

"paths": {

"@/*": ["src/*"]

"types": ["node"],

......<略>

}

接著你可以去點選如 @/pages，看可否正確導向 src/pages

rules 中要新增一條規則，讓你的 alias 錯誤被忽略

{
  rules: {
    'import/no-unresolved': [2, { ignore: ['^@/'] }]
  },
}

{

rules: {

'import/no-unresolved': [2, { ignore: ['^@/'] }]

}

按讚加入粉絲團