react 如何用 @ 代表 import 的 /src？

Question

我在網上找到用這方式可以做到

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

假設
/src/styles/index.css
引入時

import '../../styles/index.css'

可以變成是

import 'styles/index.css'

但我想讓它表示的方式是

import '@/styles/index.css'

我就能區分該文件是不是從 node_modules 引入，看起來比較清楚? 可能強迫症

import '@/styles/index.css'
import ReactDOM from 'react-dom'

Answer 1

给 src 目录起一个 @ 别名，需要告知 Webpack 和 代码编辑器 在遇到 import/require("@/xxx") 时去 src 目录查找

Webpack 与模块路径相关的是模块解析，因此需要配置 resolve，正好提供了 alias 字段配置路径别名

const path = require('path');

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

resolve.alias 的更多用法可见 https://webpack.docschina.org...

代码编辑器（这里默认是 VSCode），与模块路径相关的是 IntelliSense（智能补全/代码跳转），需要在 jsconfig.json 或 tsconfig.json 中配置 compilerOptions.paths

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

https://code.visualstudio.com...

Answer 2

请在webpack的配置中使用alias

module.exports = {
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'client'),
      '@components': path.resolve(__dirname, 'client/components'),
      'utils': path.resolve(__dirname, 'client/utils/utils.js'),
    },
  },
};