如何在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 =.变体.但我相信，它已被弃用-最好不要使用.而且，我还有一个 posstcss.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.

推荐答案

为使webpack的别名(注意绝对导入不是别名)起作用，您需要配置默认的 create-react-app 的webpack.config.js .

In order for webpack's aliases (notice that absolute imports are not 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中为路径IntelliSense添加 jsconfig.json 文件，

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

现在，使用IntelliSense的此类代码将起作用:

Now such code with IntelliSense will work:

// AutoComplete works
import {ColorBox} from '@atoms';
import {RECOIL_STATE} from '@state';

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