webpack 如何在create-react-app中创建导入快捷方式/别名?

osh3o9ms  于 2022-11-13  发布在  Webpack
关注(0)|答案(4)|浏览(158)

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

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库。我试着在那里粘贴相同的代码,但是它也不起作用。

gblwokeq

gblwokeq1#

通过Create React App v.3,这终于成为可能
只是把:

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

转换为jsconfig.jsontsconfig.json(如果使用打字脚本)
这是关于这个的精彩article

juud5qan

juud5qan2#

最简单的存档方法如下步骤。(与@DennisVash相同的方式显示为,但在简单的形式)
1.安装-安装和设置CRACO。

yarn add @craco/craco

# OR

npm install @craco/craco --save

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

1.在package.json文件的scripts部分更新对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
谢谢你。:)

5w9g7ksd

5w9g7ksd3#

易混淆术语注解

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

官方的方法to use the eject script。但是推荐的方法是使用库而不弹出(为此找到最现代的库)。

VSCode智能感知

此外,您应该为VSCode(或tsconfig.json)中的路径IntelliSense加入jsconfig.json档案,see followup question
现在,这样的代码与IntelliSense一起工作:

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

zaqlnxep4#

如果您要用途:

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

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

相关问题