如何在 create-react-app 中设置导入快捷方式/别名？由此：
import { Layout } from '../../Components/Layout'
对此：
import { Layout } from '@Components/Layout'
我有一个webpack4.42.0 版本。我的根目录中没有 webpack.config.js 文件。我试图用下面的代码自己创建一个：
const path = require('path')
module.exports = {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src/'),
}
}
};
但它似乎不起作用。我已经NODE_PATH=.在.env文件中看到了变体。但我相信，它已被弃用 - 最好不要使用。而且，我有一个posstcss.config.js文件。因为我已经安装了 TailwindCss 并在那里导入了 CSS 库。我试图在那里粘贴相同的代码，但它也不起作用。
// Absolute path: paths which are relative to a specific path
import Input from 'components' // src/components
import UsersUtils from 'page/users/utils' // src/page/users/utils
// Alias path: other naming to specific path
import Input from '@components' // src/components
import UsersUtils from '@userUtils' // src/page/users/utils
为了让 webpack 的别名工作，你需要配置默认webpack.config.js的create-react-app.
在官方的方法是使用eject脚本。
但推荐的方法是使用库而不弹出，如craco.
安装完成后，将craco.config.js所需的配置添加到您的根文件夹中。
我的例子：
// craco.config.js
const path = require(`path`);
const alias = require(`./src/config/aliases`);
const SRC = `./src`;
const aliases = alias(SRC);
const resolvedAliases = Object.fromEntries(
Object.entries(aliases).map(([key, value]) => [key, path.resolve(__dirname, value)]),
);
module.exports = {
webpack: {
alias: resolvedAliases,
},
};
其中aliases.js( ./src/config/aliases) 导出一个辅助函数：
const aliases = (prefix = `src`) => ({
'@atoms': `${prefix}/components/atoms`,
'@molecules': `${prefix}/components/molecules`,
'@organisms': `${prefix}/components/organisms`,
'@templates': `${prefix}/components/templates`,
'@components': `${prefix}/components`,
'@config': `${prefix}/config`,
'@enums': `${prefix}/enums`,
'@hooks': `${prefix}/hooks`,
'@icons': `${prefix}/components/atoms/Icons`,
'@styles': `${prefix}/styles`,
'@utils': `${prefix}/utils`,
'@state': `${prefix}/state`,
'@types': `${prefix}/types`,
'@storybookHelpers': `../.storybook/helpers`,
});
module.exports = aliases;
此外，您应该jsconfig.json在 VSCode（或tsconfig.json）中为路径 IntelliSense添加文件，请参阅后续问题。
现在这样的带有 IntelliSense 的代码将起作用：
// NOTE THAT THOSE ARE ALIASES, NOT ABSOLUTE PATHS
// AutoComplete and redirection works
import {ColorBox} from '@atoms';
import {RECOIL_STATE} from '@state';
按照以下步骤进行存档的最简单方法。（与@DennisVash显示的方式相同，但形式简单）
yarn add @craco/craco
# OR
npm install @craco/craco --save
craco.config.js在根目录创建一个文件并配置CRACO：/* craco.config.js */
const path = require(`path`);
module.exports = {
webpack: {
alias: {
'@': path.resolve(__dirname, 'src/'),
'@Components': path.resolve(__dirname, 'src/components'),
'@So_on': path.resolve(__dirname, 'src/so_on'),
}
},
};
react-scripts脚本部分中的现有调用package.json以使用 craco CLI：/* package.json */
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
}
现在让我们测试一下。
// Before
import Button from "./form/Button"
import { Layout } from '../../Components/Layout'
// After
import Button from "@/form/Button"
import { Layout } from '@Components/Layout'
文档克拉科
谢谢你。:)
终于可以使用 Create React App v.3
就放：
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
进入jsconfig.json或tsconfig.json如果您使用typescript
这是关于这个的精彩文章。
如果你想使用：
// this:
import MyUtilFn from 'utils/MyUtilFn';
// Instead of this:
import MyUtilFn from '../../../../utils/MyUtilFn';
使用 node module插件来解析 urls https://www.npmjs.com/package/babel-plugin-module-resolver。通过安装它并将其添加到您的 webpack/babel.rc 文件中。