Vue CLI로 생성된 파일 살펴보기

Vue CLI webpack 옵션으로 생성된 파일들을 살펴보자.

 

Vue CLI 프로젝트 생성 방법은 이전 글을 참고한다.

2019/08/19 - [VueJS] - Vue CLI 설치 및 사용 방법

Vue CLI 설치 및 사용 방법

Vue CLI로 생성된 다양한 설정관련 파일들과 폴더들이다.

Vue CLI로 생성된 파일과 폴더들

.babelrc

최신 웹브라우저들이 Javascript ECMAScript 2015(이하 ES6) 문법들을 지원해 주기는 하지만 IE와 같이 일부 브라우저에서는 아직 기능들이 지원되지 않는 경우가 많다. 이 때문에 크로스 브라우징을 위해 작성된 코드들을 ES5로 변환해 주어야 한다. 이때 바벨(babel)이라는 도구를 사용하여 ES6 문법으로 작성된 코드를 ES5 문법으로 트랜스파일링(transpiling)하게 되는데 .babelrc에는 바벨에 대한 설정값이 정의되어 있다.

.babelrc 기본 설정 값

.editorconfig

.editorconfig 파일은 이름을 봐서 유추할 수 있듯이 IDE에서 통일된 코딩 스타일을 유지할 수 있게 도와주는 파일이다. 들여 쓰기, 파일의 인코딩 형식 등 코딩 스타일에 대한 설정이 정의되어 있다.

.editorconfig 기본 설정 값

.eslintrc.js

코딩컨벤션(Coding Convention)과 관련된 에러를 체크해주는 프로그램인 linter에 대한 설정 값이 정의되어 있다.

코딩 컨벤션이란 읽기 쉽고 관리하기 용이하도록 코드를 작성하기 위한 코딩 스타일을 정의한 것을 말한다.

.eslintrc.js은 Vue CLI를 사용하여 프로젝트를 생성 할 때 linter를 사용할 수 있도록 설정할 수 있고 코딩 컨벤션 검사 방식 도 지정할 수 있다.

.eslintrc.js 기본 설정 값

.eslintignore

.eslintignore 파일에 선언된 경로나 파일들은 linter가 검사를 진행하지 않는다.

/build/
/config/
/dist/
/*.js

.gitignore

형상관리 툴인 깃(Git)에서 버전 관리에서 제외할 파일이나 경로들을 .gitignore 에 선언한다. .gitignore에 선언된 파일이나 경로는 git에서 형상 관리하지 않는다. 만약 git을 사용하지 않는 프로젝트라면 무시해도 된다.

.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

.postcssrc.js

PostCSS는 자바스크립트 기반의 플러그인을 사용하여 CSS로 변환하는 툴이다(https://en.wikipedia.org/wiki/PostCSS).

PostCSS는 autoprefixer 플러그인을 사용하여 특정 브라우저에서 지원되지 않는 속성에 -webkit-이나  -moz-와 같은 prefix를 자동으로 붙일 수 있고 postcss-color-function 으로 color modifier를 사용할 수 있게 해 준다.

PostCSS 사용방법에 대해서 더 자세하게 알고 싶다면 아래 주소에서 확인할 수 있다.

https://github.com/postcss/postcss

postcss/postcss

package.json

webpack 설정과 npm을 통해 설치한 패키지들의 정보를 package.json을 통해서 관리한다.

webpack.json 프로젝트에 설치된 패키지 정보