Babel 설치 튜 토리 얼 (mac)

메모: node. js 를 설치 하지 않 았 다 면 먼저 설치 하 세 요!!node. js 를 설치 할 때 npm 를 기본적으로 설치 합 니 다.
단계:
1. 폴 더 를 새로 만 들 고 다음 에 있 는 모든 것 을 담 습 니 다.나 는 learn - es6 폴 더 를 새로 만 들 었 다.
2. learn - es6 프로젝트 파일 에 루트 디 렉 터 리 파일 을 만 듭 니 다:
-package.json
-src   
   --index.html
   --js   
       ---index.js

이 단계 의 관건 은
  • src 폴 더 가 있어 야 합 니 다!!그렇지 않 으 면 뒤에 잘못 보고 할 것 이다
  • package. json 파일 을 새로 만 들 예정 입 니 다!

  • 이 두 개 는 절대 없어 서 는 안 된다. 하나 가 빠 지면 잘못 을 보고 할 것 이다!
    index. html 파일 내용 이 비어 있 고 index. js 내용 도 비어 있 습 니 다 (설치 완료 후 테스트 용).
    3. 프로필. babelrc
    MAC 터미널 열기:
    3.1 먼저 sudo - s 에서 최고 권한 가 져 오기;
    3.2 그리고 cd 를 통 해 learn - es6 프로젝트 파일 에 들 어 갑 니 다.
    3.3 "vim. babelrc" 에 이 어 "babelrc" 파일 을 새로 만 듭 니 다.
    키보드 입력 'i' 편집 모드 에 들 어가 서 입력
      {
        "presets": [
          "es2015",
          "react",
          "stage-2"
        ],
        "plugins": []
      }

    입력 이 완료 되 었 습 니 다. "esc" 키 가 종료 되 었 습 니 다. "wq" 를 입력 하 십시오. 사칭 은 영어 로 저장 되 고 종료 되 었 음 을 표시 합 니 다.
    그리고 다음 규칙 집합 을 설치 합 니 다:
    # ES2015    
    $ npm install --save-dev babel-preset-es2015
    
    # react    
    $ npm install --save-dev babel-preset-react
    
    # ES7             (  4   ),    
    $ npm install --save-dev babel-preset-stage-0
    $ npm install --save-dev babel-preset-stage-1
    $ npm install --save-dev babel-preset-stage-2
    $ npm install --save-dev babel-preset-stage-3
    

    4. 명령 행 코드 변환 babel - cli
      :babel-cli        ,                  !!
    

    터미널 은 여전히 learn - es6 의 위치 에 있 습 니 다. 다음 명령 을 수행 합 니 다. $ npm install --save-dev babel-cli5. 다음 명령 을 집행 하고 잘못 보고 하지 않 으 면 됩 니 다.$ npm run build
    만약 잘못 보고 했다 면 package. json 의 "scripts" 를 다음 과 같이 바 꾸 십시오.
    "scripts": {
        "build": "babel src -d lib"
      },

    좋은 웹페이지 즐겨찾기