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

火爆浪子
  • 2.8k

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

{
  "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'
回复
阅读 425
2 个回答

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.jsontsconfig.json 中配置 compilerOptions.paths

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

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

请在webpack的配置中使用alias

module.exports = {
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'client'),
      '@components': path.resolve(__dirname, 'client/components'),
      'utils': path.resolve(__dirname, 'client/utils/utils.js'),
    },
  },
};
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏