如何在create-rect应用程序中创建导入快捷方式/别名

Question

如何在create-react应用程序中设置导入快捷方式/别名？由此：

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/'),
}
}
};

但它似乎不起作用。我在.env文件中看到了NODE_PATH=.变体。但我相信，它已经被弃用了——最好不要使用。此外，我还有一个posstcss.config.js文件。因为我已经安装了TailwindCs，并在那里导入了CSS库。我试过在那里粘贴相同的代码，但也没有成功。

Answer 1

Create React App v.3 终于实现了

刚放：

{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}

如果使用Typescript ，则转换为jsconfig.json或tsconfig.json

这是一篇关于这方面的精彩文章。

Answer 2

归档此文件的最简单方法如下。(与@DennisVash显示的方式相同，但形式简单(

1. 安装-安装和设置CRACO

yarn add @craco/craco
# OR
npm install @craco/craco --save

2. 在根目录中创建一个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'),
}
},
};

3. 在package.json文件的脚本部分更新对react-scripts的现有调用以使用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'

文档Craco

谢谢。：(

Answer 3

// 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的别名工作，您需要配置create-react-app的默认webpack.config.js。

的官方方式是使用eject脚本。但是推荐的方法是使用库而不弹出(为此找到最现代的库(。

VSCode IntelliSense

此外，您应该为VSCode(或tsconfig.json(中的路径IntelliSense添加jsconfig.json文件，请参阅后续问题。

现在这样的代码与IntelliSense将工作：

// NOTE THAT THOSE ARE ALIASES, NOT ABSOLUTE PATHS
// AutoComplete and redirection works
import {ColorBox} from '@atoms';
import {RECOIL_STATE} from '@state';

Answer 4

如果您想使用：

// this:
import MyUtilFn from 'utils/MyUtilFn';
// Instead of this:
import MyUtilFn from '../../../../utils/MyUtilFn';

使用节点模块插件来解析URLhttps://www.npmjs.com/package/babel-plugin-module-resolver。通过安装它并将其添加到您的webpack/babel.rc文件中。

Answer 5

步骤1

yarn add --dev babel-plugin-module-resolver

添加此插件

步骤2

在babel.config.js文件中

ALIAS NAME    ALIAS PATH
@navigation   ./src/navigation
@components   ./src/components
@assets       ./assets
[
"module-resolver",
{
root: ["./src"],
alias: {
"^~(.+)": "./src/\1",
},
extensions: [
".ios.js",
".android.js",
".js",
".jsx",
".json",
".tsx",
".ts",
".native.js",
],
},
];

步骤3

import example
import SomeComponent from '@components/SomeComponent.js';

步骤4重新启动服务器

yarn start

参考链接：如何使用React本机和VSCode 的导入别名