javascript - "injectBabelPlugin" დამხმარე შეზღუდულია v2.0-დან. შეგიძლიათ გამოიყენოთ customize-cra plugin-ები მის ნაცვლად


მე ვცდილობ შევცვალო ჩემი იმპორტები ბაბელის გამოყენებით. მე ვემორჩილები ამ ბმულს:

https://medium.com/@leonardobrunolima/react-tips-working-with-relative-path-using-create-react-app-fe55c5f97a21

ეს არის ჩემი config-overrides.js

const { injectBabelPlugin } = require('react-app-rewired');

const rootImportConfig = [
    "root-import",
    {
        rootPathPrefix: "~",
        rootPathSuffix: "src"
    }
];

module.exports = config => injectBabelPlugin(rootImportConfig, config);

Package.json:

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",

ამჟამად, ეს მაძლევს შეცდომას, რომ: "injectBabelPlugin" ჰელპერი აღარ გამოიყენება ვერსიიდან v2.0. შეგიძლიათ გამოიყენოთ customize-cra პლაგინები მის ნაცვლად

ამიტომ, მე დავაყენე

nom install customize-cra react-app-rewired --dev

და ჩემს js ფაილში შევცვალე 'react-app-rewired' 'customize-cra'-ზე, როგორც შემოთავაზებულია აქ: https://github.com/arackaf/customize-cra#available-plugins

თუმცა, ეს მაინც არ მუშაობს, რადგან injectBabelPlugin ასევე მოხუცებულია. სჭირდება მისი ფუნქციის გამოყენება აქ? მე ვცადე კონფიგურაციის ფაილები აქედან, მაგრამ ჩემთვისაც არ მუშაობს. მისი src ფუნქციონალიც განსხვავებულია.

https://github.com/timarney/react-app-rewired/issues/348

როგორ შემიძლია გავასწორო ჩემი კონფიგურაციის ფაილი და იმპორტები? ნაცვლად

import { ResultAlert } from '../../components/alerts/ResultAlert';

მინდა გავაკეთო რაღაც მსგავსი:

import {ResultAlert} from '~/components';

პასუხი #1

მე მგონია, აქ შეგიძლიათ მიიღოთ ის, რაც გსურთ, ისე, რომ არ იყოთ მიბმული react-scripts-ის ჰაკინგზე. უბრალოდ გამოიყენეთ baseUrl კონფიგურაცია თქვენს jsconfig.js ან tsconfig.ts ფაილში. დეტალები შეგიძლიათ იხილოთ ამ ბლოგ პოსტში: https://dev.to/mr_frontend/absolute-imports-in-create-react-app-3ge8

მაგრამ ძირითადად:

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

ამის მერე თქვენ შეგიძლიათ გააკეთოთ ისეთი რაღაც, როგორიც არის import Home from "components/Home" და ეს უბრალოდ იმუშავებს.