절대 경로로 import 쓰기

추기: 2016/7/6에 이 글을 썼는데 최근에 이 분야의 지식을 갱신하지 않아서 내용이 낡아졌어요.
ES Modules에 js를 쓰면 상대 패스 지옥이 된다.
import baz from '../../../src/foo/bar/baz'
나는 프로젝트 노선의 절대 경로로 이것을 쓰고 싶지만, 몇 가지 방법이 있다.
사용
  • (babel 사용)babel-plugin-module-alias
  • browserify, 웹팩의 설정으로 진행
  • (다른 것도 있어요?)
  • 테스트에서 js를 묶지 않은 경우 1입니다.mocha --compilers js:babel-core/register ...라면 바벨의 이동 절대 경로가 해결될 수 있어서 좋아요.
    babel-Plugin-module-alias를 설치한 후.babelrc에 추가로 설정하면 된다.설정에 따라 깊은 곳에 있는 모듈을 밀어내고 별칭으로 참조할 수 있습니다.
    .babelrc
    {
      "plugins": [
        ["module-alias", [
          { "src": "./src", "expose": "src" }
    //    { "src": "./src/foo/bar/blah/blah/baz", "expose": "bazu" }
        ]]
      ]
    }
    
    절대 패스!
    import baz from 'src/foo/bar/baz'
    

    ESLit, flow 불평


    이렇게 하면 ESLightimport/no-unresolved의 규칙과 flow가 잘못될 수 있으니 ESLight를 놓치고 flow 경로를 알려주세요.
    .eslintrc
    {
      "rules": {
        "import/no-unresolved": [2, { ignore: ['^src'] }]
      }
    }
    
    .flowconfig
    [options]
    module.name_mapper='^src/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'
    
    추기
    ESLit을 통해 모듈eslint-import-resolver-babel-module-alias 해결 가능

    좋은 웹페이지 즐겨찾기