상대 패스의 비극

실화 1. 계층을 거슬러 올라가 import하는 것이 귀엽다

처음에는 상대 패스에서도 여전히 좋았습니다 · ·
계층도 적고 심플한 구성이었기 때문에import TextBox from "./**/TextBox"라는 바람에 써도 별로 문제 없었어요, 그래.

그렇지만? 어플리케이션이 크고 복잡해짐에 따라 상대 패스를 쓰는 것이 힘들어졌습니다.
common 디렉토리에 응용 프로그램 공통 Component를 넣는 것이 좋지만 경로를 거쳐 import하는 것이 번거롭습니다.import TextBox from "../**/**/common/**/TextBox"벌써 패스를 쓰는 것만으로, 「에ー이 파일은 지금 이 장소이니까 2계층 거슬러 올라간 이래서··, 아, 다르다! 3계층이었다! (눈물)

실화 2. Component의 장소가 바뀌면 import도 수정

↑의 예에서import TextBox from "../**/**/common/**/TextBox"하는 Component의 위치가 변경된다고 가정해 봅시다.
자주 있는 자식 컴퍼넌트화를 하게 되어 계층이 더욱 깊어졌다고.

그러면 상대 패스이므로 import도 일부러 수정하지 않으면 안 되네요.import TextBox from "../**/**/**/common/**/TextBox"
・・・우와, 멘도쿠-사이-.
이미 상대 패스는 싫다 (눈물)

절대 경로로 가져오기

그래서 향후에도 상대 패스는 그만두고 절대 패스로 import합시다는 것이 되었습니다.
실은 이것 의외로 간단하게 할 수 있었습니다.
네, babel-root-import 패키지를 사용하십시오 (키릿)
이 패키지를 사용함으로써 링크의 페이지에 실려있는 것처럼 절대 패스로 다음과 같이 알기 쉽게 import 할 수 있습니다.

// Usually 
import SomeExample from '../../../some/example.js';
const OtherExample = require('../../../other/example.js');

// With Babel-Root-Importer 
import SomeExample from '~/some/example.js';
const OtherExample = require('~/other/example.js');

babel-root-import

소개

도입은 간단.

1단계 npm 설치npm install babel-root-import --save-dev
2단계 .babelrc에 다음 줄을 추가하기만 하면 됩니다.

{
  "plugins": [
    ["babel-root-import"]
  ]
}

사용법

기본적으로 node_modules가 있는 계층을 루트로 간주하여 절대 경로를 지정합니다.

이번 절대 패스로의 import를 시험하기 위해서 샘플의 React 어플리케이션을 만들었으므로, 이 샘플을 예로 구체적인 사용법을 설명합니다.
htps : // 기주 b. 코 m / 엔다 m / 레아 ct

로컬에 떨어뜨려 받은 후, src/index.jsx를 보면 아이 컴퍼넌트를 절대 패스로 import를 하고 있습니다.

import MessageBox from "~/src/elements/MessageBox.jsx";

class App extends React.Component {

이것만으로도 좋지만 실제로는 루트 경로를 다른 장소로 지정하고 싶은 경우가 있습니다.
그럴 때는 .babelrc를 수정합시다.

{
  "presets": [
    "es2015", "react"
  ],
  "plugins": [
    ["babel-root-import", {
      "rootPathSuffix": "src"
    }]
  ]
}

rootPathSuffix라는 옵션으로 루트 경로를 지정할 수 있습니다.
src 디렉토리가 root가 되었기 때문에, import도 보다 간결하게 됩니다.

// import MessageBox from "~/src/elements/MessageBox.jsx";
import MessageBox from "~/elements/MessageBox.jsx";

class App extends React.Component {

또 하나. root를 나타내는 기호는 디폴트로 「~」입니다만, 만약 취향에 바꾸고 싶은 경우로 rootPathPrefix 옵션으로 변경 가능합니다.

{
  "presets": [
    "es2015", "react"
  ],
  "plugins": [
    ["babel-root-import", {
      "rootPathPrefix": "@",
      "rootPathSuffix": "src"
    }]
  ]
}

시도에 루트 기호를 '@'로 변경해 보았습니다.

import MessageBox from "@/elements/MessageBox.jsx";

class App extends React.Component {

babel-root-import로 이제 상대 경로에 괴롭히지 않고 끝나게 되었습니다.
여러분도 Zehi 시도하십시오