Webpack React 應用程序中 src 文件夾的別名？

Question

我想使用絕對導入來導入相對於根src目錄的任何文件。 這是我的文件夾結構：

example/
┣ public/
┃ ┣ index.html
┣ src/
┃ ┣ components/
┃ ┣ ┣ App.css
┃ ┣ ┣ App.js
┃ ┣ ┗ Todo.js
┃ ┣ api.js
┃ ┣ history.js
┃ ┗ index.js
┣ craco.config.js
┣ jsconfig.json

這是我的配置

var path = require("path");
module.exports = {
  resolve: {
    alias: {
      src: path.resolve(__dirname, "src"),
    },
  },
};

import Todo from "src/components/Todo"

但我得到這個錯誤。

Module not found: Can't resolve 'src/components/Todo' in 'C:\_MyFiles\Programming\example\src\components'

---

但是，如果我更改配置並導入以像這樣引用 src 下的子文件夾，它就可以工作......

var path = require("path");
module.exports = {
  resolve: {
    alias: {
      components: path.resolve(__dirname, "src/components"),
    },
  },
};

import Todo from "components/Todo"

---

我怎樣才能讓第一個變體工作，所以導入引用 src 文件夾而不是它的子文件夾？

Answer 1

您可以使用：

resolve: {
  modules: [path.resolve('./src'), path.resolve('./node_modules')],
  extensions: ['', '.js', '.jsx']
}

這將為src和node_modules文件夾中的所有子目錄以及src文件夾本身創建一個別名。 這樣你就可以使用

Import App from 'components/App'

和

Import history from 'history'