해를 좀먹는 그늘

일반적인 웹 프로젝트에서는 es5를 쓰며 es6를 사용하기 위해서는 browser.js 혹은 babel.js를 load 해야 합니다.

그마저도 모든 es6 코드를 커버하지는 못하여 아래와 같이 es6 코드를 es5로 컴파일 해주는 webpack bundling 과정에 대해 설명 하겠습니다.

1. Node js 설치

• 1-1. 윈도우 환경 기준으로 아래 사이트 접속 후 nodejs 를 다운 받습니다.

  • https://nodejs.org/en/
  • 최신 버전은 필요없고 LTS 안정버전 기준으로 다운로드 합니다.

• 1-2. 다운로드 후 설치 파일을 실행하여 NEXT 버튼 클릭으로 기본 설정 설치를 완료 합니다.

• 1-3. 설치 완료 후 noedjs를 전역에서 실행 할 수 있도록 환경 설정을 진행 합니다.
  • 시스템속성 > 고급 > 환경변수 를 클릭하여 환경변수 설정을 진행 합니다.
  • 사용자 변수에 npm 위치 추가 ( C:\Users\사용자이름\AppData\Roaming\npm )

• • 시스템변수 > path > 새로만들기를 클릭하여 시스템 변수 nodejs를 추가합니다.

• • 윈도우 + R > node -v 로 nodejs 버전 확인이 가능하면 nodejs 설치가 끝났습니다.

2. Babel, webpack 빌드를 위한 설정

• 2-1. 일반적은 프론트엔드 프로젝트의 경우 root 디렉토리, 스프링의 경우 src/main 위치에서 아래 순서대로 명령어를 수행 한다.

  • npm init -y : 프로젝트에서 npm 프로그램 시작을 의미하는 명령어 (실행 후 package.json 파일 자동 생성 완료)
  • npm install --save-dev webpack webpack-cli : 스크립트 간 의존성 관계를 하나의 파일로 bundling 해주는 webpack 설치
  • npm install --save-dev babel-loader : es6++ 이상의 문법에 대해 브러우저에 관계없이 동작되도록 컴파일 해주는 컴파일러
  • npm install --save-dev @babel/cli @babel/core @babel/preset-env : 위와 동일
  • npm install @babel/polyfill : babel 컴파일러만 설치 시 es6++ 문법에 대해 변환이 안되는 몇몇 가지 문제를 해결한 패키지

• 2-2. 2-1 과 동일한 위치에 .babelrc 파일 생성

  • babel 환경 설정 

    {   "presets": [     [       "@babel/preset-env",       {         "targets": {           "browsers": [             "last 2 versions",             "not ie <= 9"           ]         }       }     ]   ] }

• 2-3. 2-1과 동일한 위치에 webpack.config.js 파일 생성

  • webpack 환경 설정 파일

    const path = require('path');   module.exports = {     entry: {         index : ['@babel/polyfill', './webapp/js/bundle/index.js'] // 빌드를 진행 하려는 파일 위치         /*         test1 : ['@babel/polyfill', './webapp/js/bundle/test1.js'], // 각각 파일로 빌드를 할 수 있짐만 비효율 적이므로 index.js 파일에 export 하여 한곳으로 빌드 추천         test2: ['@babel/polyfill', './webapp/js/bundle/test2.js']         */     },     output: { // 빌드 된 파일이 저장될 위치         path: path.resolve(__dirname, './webapp/js/bundle'),         filename: 'webpack.bundle.js', // filename : '[name].bundle.js',         // library: "bundle", // 이름을 지정 할 경우 bundle.es6Code() 형태로 호출         libraryTarget: "umd", // output.libraryTarget을 umd로 설정하면 모듈은 <script src=""> 로드 뿐만 아니라 모든 방식의 로더에서 사용할 수 있음     },     module: {         rules: [             {                 test: /\.js$/,                 exclude: /node_modules/,                 use: {                     loader: 'babel-loader',                     options: {                         presets: ['@babel/preset-env']                     }                 }             }         ]     },     devtool: 'source-map',     mode: 'development' };

• 2-4. package.json의 스크립트 수정

  • package.json 상단 부분에서 "script" 명령어를 아래와 같이 변경 한다.

  • 아래 설정의 의미는 npm run dev 명령어 수행 시 webpack 빌드를 진행할 것이고, -w의 경우 빌드 대상 파일을 watch 하며 변경이 일어날 경우 자동 재 빌드를 수행 함

    "scripts": {   "dev": "webpack -w --mode development --devtool inline-source-map",   "build": "webpack --mode production" },

3. TEST ES6 코드 작성 및 빌드 테스트

• 3-1. TEST ES6 코드

  • src/main/webapp/js/bundle/classTest.js

    export class ClassTest {     constructor(data) {         this.data = data || "data";     }       call(){         console.log("class test call : " + this.data)     } }

  • src/main/webapp/js/bundle/index.js

    export { ClassTest } from './classTest';

• 3-2. npm 빌드 수행
  • npm run dev : 테스트 시
  • npm run build : 배포 시 (스크립트를 압축-minify  하여 코드라인 축소 및 난독화)
  • 빌드 시 2-3 output 위치에 webpack.bundle.js 파일 생성 됨

• 3-3. jsp 혹은 html 파일에서 번들링된 파일을 로드 후 동작 테스트

  • src/main/webapp/WEB-INF/views/test.jsp

    <script src="${pageContext.request.contextPath}/js/bundle/webpack.bundle.js"></script> <script>     let testCode = new ClassTest('code test');     testCode.call(); </script>

4. 빌드에 필요한 파일 목록

• .babelrc
• package.json
• package-lock.json
• webpack.config.js