我一直在使用 create-react-app 包来创建一个 React 网站。我在整个应用程序中使用相对路径来导入组件、资源、redux 等。例如，import action from '../../../redux/action
我曾尝试使用module-alis npm 包，但没有成功。是否有任何插件可用于根据文件夹名称或别名（即绝对路径）导入？
例如，import action from '@redux/action'或import action from '@resource/css/style.css'
创建一个.env在项目根目录中调用的文件并在那里写入：
NODE_PATH=src
然后重启开发服务器。您应该能够在src没有相对路径的情况下导入任何内容。
请注意，我不建议调用您的文件夹，src/redux因为现在很容易混淆reduximport 是指您的应用程序还是库。相反，您可以调用您的文件夹src/app并从app/....
我们故意不支持自定义语法，@redux因为它与 Node 解析算法不兼容。
已接受答案中的方法现已被取代。Create React App 现在有一种不同的方式来设置绝对路径，如此处所述。
总而言之，您可以通过执行以下操作将应用程序配置为支持使用绝对路径导入module：
使用以下内容在项目的根目录中创建/编辑 jsconfig.json/tsconfig.json：
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
或者：
如果您使用的是 TypeScript，则可以在项目的 tsconfig.json 文件的 compilerOptions 中配置 baseUrl 设置。
完成此操作后，您可以通过指定“src”的子目录进行导入（在以下示例中，components 是 src 的子目录）例如
import Button from 'components/Button'
在您尝试了上面Ben Smith 的解决方案后，如果您发现 eslint 抱怨导入绝对路径，请将以下行添加到您的 eslint 配置中：
settings: {
'import/resolver': {
node: {
paths: ['src'],
},
},
},
如果您将自己的样板文件与文件夹的名称一起使用，请将 'src' 替换为您的文件夹。
我们可以在 webpack 配置中使用 webpack 2 解析属性。
使用 resolve 的示例 webpack 配置：
这里的 component 和 utils 是包含 React 组件的独立文件夹。
resolve: {
modules: ['src/scripts', 'node_modules'],
extensions: ['.jsx', '.js'],
unsafeCache: true,
alias: {
components: path.resolve(__dirname, 'src', 'scripts', 'components'),
utils: path.resolve(__dirname, 'src', 'scripts', 'utils'),
}
}
之后我们可以直接在文件中导入：
import UiUtils from 'utils/UiUtils';
import TabContent from 'components/TabContent';
2010 年 2 月
在这上面浪费了大约一个小时。一个例子如下：
目标：导入App.css在HomePage.js
myapp\src\ App.css
myapp\src\ pages\HomePage.js
文件： jsconfig.json
{
"compilerOptions": {
"baseUrl": "src"
}
}
文件： src\pages\HomePage.js
import "App.css";