如何在 create-react-app 中创建导入快捷方式/别名? [英] How to make an import shortcut/alias in create-react-app?

问题描述

如何在 create-react-app 中设置导入快捷方式/别名?从这里:

How to set import shortcuts/aliases in create-react-app? From this:

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

为此:

import { Layout } from '@Components/Layout'

我有一个 webpack 4.42.0 版本.我的根目录中没有 webpack.config.js 文件.我尝试自己用下面的代码创建一个:

I have a webpack 4.42.0 version. I don't have a webpack.config.js file in the root directory. I've tried to create one myself with this code inside:

const path = require('path')

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

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

But it doesn't seem to work. I've seen the NODE_PATH=. variant in .env file. But I believe, it is deprecated - better not to use. And also, I have a posstcss.config.js file. Because I've installed the TailwindCss and I import the CSS library there. I've tried to paste the same code there, but it also didn't work.

推荐答案

混淆术语的注意事项

// 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.

In order for webpack's aliases to work, you need to configure the default webpack.config.js of create-react-app.

官方方式是使用<代码>弹出脚本.

但是推荐的方法是使用一个库而不弹出，比如<代码>craco.

But the recommended way is to use a library without ejecting, like craco.

按照安装，将 craco.config.js 添加到您的根文件夹中，并使用所需的配置.

After following the installation, add craco.config.js to your root folder with the desired configuration.

我的例子:

// 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) 导出辅助函数:

Where aliases.js (./src/config/aliases) exports a helper function:

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 文件，参见后续问题.

VSCode IntelliSense

In addition, you should add jsconfig.json file for path IntelliSense in VSCode (or tsconfig.json), see followup question.

现在这样的带有 IntelliSense 的代码可以工作了:

Now such code with IntelliSense will work:

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

这篇关于如何在 create-react-app 中创建导入快捷方式/别名?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！