我一直在使用 create-react-app 包来创建一个反应网站。我在整个应用程序中使用相对路径来导入组件、资源、redux 等。例如，import action from '../../../redux/action
我尝试过使用module-alis npm 包，但没有成功。有没有可以根据文件夹名称或别名（即绝对路径）导入的插件？
例如，import action from '@redux/action' 或 import action from '@resource/css/style.css'
【问题讨论】：
标签： reactjs import create-react-app relative-path absolute-path
我们可以在 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';
【讨论】：
/create-react-app/blob/master/packages/react-scripts/config/webpack.config.dev.js/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js
我正在为我的项目使用babel-plugin-module-resolver 来解决该问题。 babel-plugin-module-resolver 也与 module-alis 相同。所以我认为你应该解决使用 module-alis 问题。
因为你没有告诉我们为什么使用 module-alis 会失败？所以我不能告诉你如何解决它。
当你不知道原因时，不要放弃你的解决方案！
【讨论】：
在项目根目录下创建一个名为.env的文件并写在那里：
NODE_PATH=src
然后重启开发服务器。您应该能够在没有相对路径的情况下导入 src 内的任何内容。
请注意，我不建议您调用您的文件夹 src/redux，因为现在混淆了 redux import 是指您的应用程序还是库。相反，您可以调用您的文件夹 src/app 并从 app/... 导入内容。
我们故意不支持像 @redux 这样的自定义语法，因为它与节点解析算法不兼容。
【讨论】：
{ "compilerOptions": { "baseUrl": "src" } }
在 package.json 文件中，
像这样在脚本对象中弹出这段代码..
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
"eject": "NODE_PATH=src/ react-scripts eject"
},
这将在您的应用中启用绝对路径导入
【讨论】：
已接受答案中的方法现已被取代。 Create React App 现在有一种不同的方式来设置绝对路径，如 here 所述。
总而言之，您可以通过执行以下操作将您的应用程序配置为支持使用绝对路径导入模块：
使用以下内容在项目的根目录中创建/编辑 jsconfig.json/tsconfig.json：
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
完成此操作后，您可以通过指定“src”的子目录来导入（在以下示例中，components 是 src 的子目录），例如
import Button from 'components/Button'
【讨论】：
使用 react-app-rewire-alias 解决方案。它提供的不仅仅是别名，但它还允许在根目录中有多个 src 文件夹：
上述示例的配置如下：
// config-overrides.js:
const {alias} = require('react-app-rewire-alias')
module.exports = function override(config) {
alias({
"@redux": "src/redux",
"@resource": "resource", // or "src/resource" if it is in src
})(config)
return config
}
这适用于简单的 js 项目。
有关详细信息，请参阅文档 react-app-rewire-alias。如何配置ts项目或从jsconfig.json或tsconfig.json等加载路径
【讨论】：
在您尝试上述Ben Smith's solution 后，如果您发现 eslint 抱怨导入绝对路径，请将以下行添加到您的 eslint 配置中：
settings: {
'import/resolver': {
node: {
paths: ['src'],
},
},
},
如果您使用自己的样板文件和文件夹名称，请将“src”替换为您的文件夹。
【讨论】：
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";
【讨论】：
没有一个答案对我有用。有些根本不工作，有些工作，但导入已经在 src 中，例如：
import something from 'path/to/file'.
而我希望能够做到：
import something from 'src/path/to/file'
我是这样解决的：
tsconfig.json
{
"compilerOptions": {
// ...
"baseUrl": ".",
"rootDirs": [
"src"
]
},
"include": [
"src"
]
}
【讨论】：