PHP 개발: Babel 및 Webpack을 사용한 ES6+ 구문 변환 및 모듈 패키징-PHP 튜토리얼-php.cn

PHP 개발: Babel 및 Webpack을 사용한 ES6+ 구문 변환 및 모듈 패키징

WBOY

풀어 주다： 2023-06-14 16:24:01

원래의

1222명이 탐색했습니다.

신세대 JavaScript 표준 ES6(ECMAScript 2015)이 출시되면서 JavaScript는 언어 측면에서 크게 향상되었습니다. ES6에는 화살표 함수, 템플릿 문자열, 클래스 및 모듈과 같은 많은 새로운 언어 기능이 포함되어 있어 JavaScript를 더 읽기 쉽고 효율적이며 개발하기 쉽게 만듭니다.

그러나 ES6 사양이 출시된 지 수년이 지났음에도 불구하고 실제 개발 과정에서는 브라우저 호환성 문제로 인해 최신 브라우저에서도 ES6의 구문과 모듈을 완전히 지원하지 않습니다. 따라서 개발자는 이전 브라우저에서 실행하려면 변환기를 사용하여 ES6 구문을 ES5 구문으로 변환해야 합니다. 동시에 코드 관리 및 유지 관리를 용이하게 하기 위해 모듈을 패키징하고 여러 JavaScript 파일을 하나 이상의 번들 파일로 병합해야 합니다.

PHP 개발에서 프런트 엔드에서 ES6 구문과 모듈을 사용해야 하는 경우 Babel 및 Webpack과 같은 일부 도구를 사용하여 이러한 작업을 완료할 수 있습니다.

Babel 소개

Babel은 우리 코드가 이전 브라우저에서도 잘 실행될 수 있도록 ES6 코드를 ES5 코드로 변환할 수 있는 JavaScript 컴파일러입니다. Babel은 JavaScript의 최신 표준 구문을 컴파일하는 동시에 Promise, Generator 및 템플릿 문자열과 같은 일부 새로운 API를 변환할 수 있습니다. Babel은 ES6 모듈 구문을 CommonJS, AMD, UMD 및 SystemJS와 같은 다양한 모듈 시스템으로 변환하는 것을 지원합니다.

Webpack 소개

Webpack은 최신 JavaScript 애플리케이션을 위한 정적 모듈 번들러입니다. Webpack은 JavaScript 모듈 및 종속성뿐만 아니라 CSS, 이미지, 글꼴 등과 같은 기타 리소스도 처리할 수 있습니다. Webpack은 브라우저에서 쉽게 로드할 수 있도록 여러 JavaScript 모듈을 하나 이상의 번들 파일로 패키징할 수 있습니다. Webpack의 가장 큰 장점은 구성 가능성이 높고 유연하다는 것입니다.

Babel과 Webpack을 사용하여 ES6+ 구문 변환 및 모듈 패키징하는 방법

아래에서는 ES6+ 구문 변환 및 모듈 패키징을 위해 Babel과 Webpack을 사용하는 방법을 소개합니다.

Prerequisites

node.js 설치
npm 설치
명령줄에서 다음 명령을 실행하여 Babel 및 Webpack을 설치하세요.

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

로그인 후 복사

Babel 구성

Babel을 설치한 후 .babelrc 파일을 구성해야 합니다. . 이 파일은 변환해야 할 코드와 변환 방법을 Babel에 알려줍니다.

루트 디렉터리에 .babelrc 파일을 생성하고 다음 코드를 입력합니다.

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

로그인 후 복사

preset-env가 여기에 사용되며, 현재 환경 및 구성을 기반으로 컴파일해야 하는 기능을 자동으로 선택할 수 있습니다. 이 설정 후에 Babel은 ES6+ 구문을 보다 호환되는 ES5 구문으로 변환할 수 있습니다.

Webpack 구성

Webpack을 설치한 후 webpack.config.js 파일을 생성해야 합니다. 이 파일에는 Webpack 구성이 포함되어 있습니다.

루트 디렉터리에 webpack.config.js 파일을 생성하고 다음 코드를 입력합니다.

const path = require('path');

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

로그인 후 복사

entry: 항목 파일 경로를 지정합니다.
output: 출력 파일 및 경로를 지정합니다.
module: 모듈을 지정합니다. 규칙:
규칙: 모듈 로딩 규칙을 지정합니다.
test: 로더에서 처리해야 하는 파일을 일치시킵니다.
use: 로더에서 처리할 필요가 없는 파일을 제외합니다. 사용될.

위 구성을 완료한 후 테스트 코드를 작성해 보겠습니다. 이 코드에는 화살표 함수, 템플릿 문자열, 클래스 및 모듈과 같은 ES6+ 구문이 포함되어 있습니다.

프로젝트의 루트 디렉토리에 src 폴더를 생성하고, 이 폴더에 app.js 파일을 생성하고, 다음 코드를 입력하세요:

const nums = [1, 2, 3];
const doubles = nums.map((num) => num * 2);
console.log(`The doubles of ${nums} are ${doubles}`);

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  sayHi() {
    console.log(`Hi, my name is ${this.name} and I'm ${this.age} years old`);
  }
}

const person = new Person('Jack', 25);
person.sayHi();

로그인 후 복사

이 코드는 브라우저에서 실행될 때 구문 오류를 발생시킵니다. ES6+ 구문은 완벽하게 지원되지 않습니다.

다음 명령을 실행하여 코드를 dist/bundle.js로 패키징합니다.