구형 브라우저에서 ES6+ 사용하기

Mithril.js는 ES5로 작성되었지만 ES6 이후 버전과 완벽하게 호환됩니다. 최신 브라우저는 기본 모듈 구문을 포함하여 이를 지원합니다. (Node.js의 특수한 모듈 해결 방식은 지원하지 않으므로 import * as _ from "lodash-es"와 같은 구문은 사용할 수 없습니다. 상대 경로 및 URL 경로만 지원합니다.) 따라서 클로저 컴포넌트에는 화살표 함수를, 클래스 컴포넌트에는 클래스를 자유롭게 사용할 수 있습니다.

하지만 Internet Explorer와 같은 구형 브라우저를 지원해야 하는 경우 ES5로 트랜스파일해야 합니다. 이 페이지에서는 Babel을 사용하여 최신 ES6+ 코드가 구형 브라우저에서 작동하도록 하는 방법을 설명합니다.

설정

먼저 Node.js가 설치되어 있지 않다면 설치하십시오. Node.js에는 곧 필요하게 될 npm이 포함되어 있습니다.

다운로드가 완료되면 터미널을 열고 다음 명령을 실행합니다.

# 실제 프로젝트 경로로 변경하십시오. 경로에 공백이 있는 경우 따옴표로 묶고,
# Linux/macOS에서 `$$`가 포함된 경우 작은 따옴표로 묶으십시오.
cd "/path/to/your/project"

# `package.json` 파일이 이미 있는 경우 이 명령은 건너뜁니다.
npm init

이제 다음 방법 중 하나를 선택할 수 있습니다.

• Babel을 번들러 없이 독립 실행형으로 사용
• Babel과 Webpack을 함께 사용하여 번들링

Babel 독립 실행형으로 사용

먼저 필요한 종속성을 설치해야 합니다.

• @babel/cli는 Babel의 핵심 로직과 babel 명령을 제공합니다.
• @babel/preset-env는 Babel이 어떤 코드를 어떻게 변환해야 하는지 결정하는 데 도움을 줍니다.

npm install @babel/cli @babel/preset-env --save-dev

이제 .babelrc 파일을 만들고 @babel/preset-env를 설정합니다.

{
  "presets": ["@babel/preset-env"],
  "sourceMaps": true
}

마지막으로, 지원해야 하는 대상 브라우저에 대한 구체적인 요구 사항이 있는 경우 Browserslist 구성을 통해 Babel(및 기타 라이브러리)이 어떤 기능을 대상으로 해야 하는지 지정할 수 있습니다.

기본적으로 아무것도 구성하지 않으면 Browserslist는 > 0.5%, last 2 versions, Firefox ESR, not dead라는 합리적인 쿼리를 사용합니다. 많은 폴리필을 사용하여 IE 8을 지원해야 하는 경우와 같이 특별한 상황이 아니면 이 단계를 건너뛰어도 됩니다.

프로젝트를 컴파일하려면 다음 명령을 실행합니다.

babel src --out-dir dist

매번 명령을 입력하지 않도록 npm 스크립트를 사용하면 편리합니다. package.json 파일의 "scripts" 객체에 "build" 필드를 추가합니다.

{
  "scripts": {
    "build": "babel src --out-dir dist"
  }
}

이제 명령을 더 쉽게 입력하고 기억할 수 있습니다.

npm run build

Webpack과 함께 Babel 사용

Webpack을 사용하여 번들링하려면 몇 가지 추가 설정 단계가 필요합니다. 먼저 Babel과 Webpack 모두에 필요한 종속성을 설치해야 합니다.

• webpack은 Webpack의 핵심 코드이고 webpack-cli는 webpack 명령을 제공합니다.
• @babel/core는 Babel의 핵심 코드이며 babel-loader의 피어 종속성입니다.
• babel-loader를 사용하면 Webpack이 Babel을 사용하여 파일을 처리할 수 있습니다.
• @babel/preset-env는 Babel이 어떤 코드를 어떻게 변환해야 하는지 결정하는 데 도움을 줍니다.

npm install webpack webpack-cli @babel/core babel-loader @babel/preset-env --save-dev

이제 .babelrc 파일을 만들고 @babel/preset-env를 설정합니다.

{
  "presets": ["@babel/preset-env"],
  "sourceMaps": true
}

다음으로, 지원해야 하는 대상 브라우저에 대한 구체적인 요구 사항이 있는 경우 Browserslist 구성을 통해 Babel(및 기타 라이브러리)이 어떤 기능을 대상으로 해야 하는지 지정할 수 있습니다.

기본적으로 아무것도 구성하지 않으면 Browserslist는 > 0.5%, last 2 versions, Firefox ESR, not dead라는 합리적인 쿼리를 사용합니다. 많은 폴리필을 사용하여 IE 8을 지원해야 하는 경우와 같이 특별한 상황이 아니면 이 단계를 건너뛰어도 됩니다.

마지막으로 webpack.config.js 파일을 만들어 Webpack을 설정합니다.

const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /\/node_modules\//,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
};

이 구성은 애플리케이션 진입점의 소스 코드 파일이 src/index.js에 있고 번들 파일이 dist/app.js로 출력된다고 가정합니다.

이제 번들러를 실행하려면 다음 명령을 입력합니다.

webpack -d --watch

매번 명령을 입력하지 않도록 npm 스크립트를 사용하면 편리합니다. package.json 파일의 "scripts" 객체에 "start" 필드를 추가합니다.

{
  "scripts": {
    "start": "webpack -d --watch"
  }
}

이제 명령을 더 쉽게 입력하고 기억할 수 있습니다.

npm start

프로덕션 빌드의 경우 스크립트를 축소해야 합니다. 다행히 Webpack에 -p 옵션을 추가하여 실행하면 됩니다.

webpack -p

이 명령을 npm 스크립트에 추가하여 더 빠르고 쉽게 빌드할 수도 있습니다.

{
  "scripts": {
    "start": "webpack -d --watch",
    "build": "webpack -p"
  }
}

그런 다음 다음 명령을 실행하면 기억하기가 더 쉽습니다.

npm run build

물론 자동 프로덕션 빌드 스크립트에서도 이 작업을 수행할 수 있습니다. 예를 들어 Heroku를 사용하는 경우 다음과 같이 설정할 수 있습니다.

{
  "scripts": {
    "start": "webpack -d --watch",
    "build": "webpack -p",
    "heroku-postbuild": "webpack -p"
  }
}