Wie erstelle ich eine Importverknüpfung/einen Importalias in der Create-React-App?

Wie lege ich Importverknüpfungen/Aliase in der Create-React-App fest? Davon:

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

dazu:

import { Layout } from '@Components/Layout'

Ich habe ein webpack 4.42.0-Version. Ich habe keine webpack.config.js-Datei im Stammverzeichnis. Ich habe versucht, selbst eines mit diesem Code zu erstellen:

const path = require('path')

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

Aber es scheint nicht zu funktionieren. Ich habe das gesehen NODE_PATH=. Variante in .env Datei. Aber ich glaube, es ist veraltet – es ist besser, es nicht zu verwenden. Und außerdem habe ich eine posstcss.config.js Datei. Weil ich TailwindCss installiert habe und die CSS-Bibliothek dort importiere. Ich habe versucht, den gleichen Code dort einzufügen, aber es hat auch nicht funktioniert.

Mit Create React App v.3 ist es endlich möglich

Einfach ausgedrückt:

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

hinein jsconfig.json oder tsconfig.json wenn Sie Typescript verwenden

Hier ist wunderbar Artikel darüber.

Am einfachsten können Sie dies mit den folgenden Schritten archivieren. (auf die gleiche Weise wie @DennisVash es gezeigt hat, aber in einfacher Form)

1. Installation – CRACO installieren und einrichten.

yarn add @craco/craco

# OR

npm install @craco/craco --save

2. Ein … kreieren craco.config.js Datei im Stammverzeichnis und konfigurieren Sie 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. Aktualisieren Sie die vorhandenen Anrufe auf react-scripts im Skriptbereich Ihres package.json Datei zur Verwendung der Craco-CLI:

/* package.json */

"scripts": {
   "start": "craco start",
   "build": "craco build",
   "test": "craco test"
}

Erledigt! Die Einrichtung ist abgeschlossen.

Jetzt testen wir es.

// Before
import Button from "./form/Button" 
import { Layout } from '../../Components/Layout'

// After
import Button from "@/form/Button"
import { Layout } from '@Components/Layout'

Dokumentation Kraco

Danke schön. 🙂 🙂

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

Damit Webpacks Aliase Damit es funktioniert, müssen Sie die Standardeinstellung konfigurieren webpack.config.js von create-react-app.

Der offizieller Weg Ist zu verwenden eject Skript. Aber die empfohlener Weg besteht darin, eine Bibliothek zu verwenden, ohne sie auszuwerfen (finden Sie dafür die modernste Bibliothek).

VSCode IntelliSense

Darüber hinaus sollten Sie hinzufügen jsconfig.json Datei für den Pfad IntelliSense in VSCode (oder tsconfig.json), siehe Folgefrage.

Jetzt funktioniert dieser Code mit IntelliSense:

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

Wenn Sie Folgendes verwenden möchten:

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

Verwenden Sie das Node-Modul-Plugin zum Auflösen der URLs https://www.npmjs.com/package/babel-plugin-module-resolver. Indem Sie es installieren und zu Ihrer webpack/babel.rc-Datei hinzufügen.

Schritt 1

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

Fügen Sie dieses Plugin hinzu

Schritt 2

In babel.config.js Datei

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",
    ],
  },
];

Schritt 3

import example

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

Schritt 4: Starten Sie den Server neu

yarn start

Referenzlink: So verwenden Sie Importaliase mit React Native und VSCode