[npm] 프로젝트 환경 설정

npm

node 모듈 다운로드와 관리를 지원하는 프로그램

webpack

• ES6의 import, export 지원

• 여러개의 .js 파일들을 웹팩빌더가 자동으로 서로 의존관계를 파악해, 하나의 묶여진 .js 파일로 만들어 배포를 도와줌

• babel 모듈 : 웹팩에서 바벨모듈을 불러와,  ES6 코드를 ES5 로 변환시켜 준다. (하위버전 브라우저까지 지원하고자 할때 필요)

 

환경 설정 순서

1. 개발 폴더 생성

2. 터미널로 폴더 경로 들어감 ls

3. npm init //npm 프로젝트 생성. package.json 파일 생성 확인

4. 웹팩 설치

5. vi package.json -> script {.... "start" : "webpack" }  추가

6. vi webpack.config.js // 웹팩 설정파일 추가

7. 필요한 파일들 생성 : src/index.js , index.html(./dist/bundle.js 스크립트 불러오기)

8. npm run start // 실행 확인

9. babel-preset-env 설치, 지원할 브라우저 설정

 

webpack, babel 설치

https://github.com/babel/babel-loader

babel/babel-loader

https://www.youtube.com/watch?v=VeK3a29x1hE&feature=youtu.be

https://www.notion.so/Babel-Tutorial-b6785fb9034c47b3a8d1267edbf77b1a

Babel Tutorial

 

 

bable preset env

배포하고자 하는 브라우저에 맞게 transpling 

https://github.com/babel/babel-preset-env#examples