如何在 create-react-app 中导入 shortcut/alias？

Question

如何在create-react-app中设置import shortcuts/aliases？来自：

import { Layout } from '../../Components/Layout'

对此：

import { Layout } from '@Components/Layout'

我有一个 webpack 4.42.0 版本。我在根目录中没有 webpack.config.js 文件。我试着用里面的代码自己创建一个：

const path = require('path')

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
    }
  }
};

不过好像不行。我在 .env 文件中看到了 NODE_PATH=. 变体。但我相信，它已被弃用 - 最好不要使用。而且，我有一个 posstcss.config.js 文件。因为我已经安装了 TailwindCss 并在那里导入了 CSS 库。我试图将相同的代码粘贴到那里，但它也没有用。

Answer 1

混淆术语的注意事项

// 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的aliases起作用，需要配置默认的webpack.config.js of create-react-app.

官方方式是to use the eject script。

但是推荐的方法是使用一个库而不弹出，比如craco。

按照 installation 之后，将 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;

VSCode 智能感知

此外，您应该在 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 2

按照以下步骤进行存档的最简单方法。（与显示的方式相同，但形式简单）

安装 - 安装和设置 CRACO。

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

在 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

Create React App v.3 终于可以实现了

只需输入：

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

到 jsconfig.json 或 tsconfig.json 如果你使用 Typescript

这里很精彩article。

Answer 4

如果你想使用：

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

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

Answer 5

React 已有 built-in 从 /src 文件夹开始的导入快捷方式。

import { Wrapper } from 'app/components'

PS：由"baseUrl": "./src"

创建

如何在 create-react-app 中导入 shortcut/alias？

How to make an import shortcut/alias in create-react-app?

javascript

alias

reactjs

webpack

create-react-app

混淆术语的注意事项

VSCode 智能感知

完成！设置完成。