>  기사  >  웹 프론트엔드  >  플러그인 도구를 사용하여 ES6 코드를 ES5로 변환하는 방법

플러그인 도구를 사용하여 ES6 코드를 ES5로 변환하는 방법

php中世界最好的语言
php中世界最好的语言원래의
2018-03-10 14:08:583059검색

이번에는 플러그인 도구를 사용하여 ES6 코드를 ES5로 변환하는 방법과 플러그인 도구를 사용하여 ES6 코드를 ES5로 변환할 때 어떤 주의사항이 있는지 보여드리겠습니다. 다음은 실제 사례입니다. .

ES6를 ES5로 변환하는 데 필요한 도구는 다음과 같습니다.

npm 환경에서: cd를 프로젝트 디렉터리로 이동합니다.

npm init -y

npm install babel-cli -g (전역적으로 먼저 설치) babel-cli);

npm install babel-cli babel-preset-es2015 --save-dev (이 두 개를 로컬로 설치);

프로젝트 디렉터리:

플러그인 도구를 사용하여 ES6 코드를 ES5로 변환하는 방법

.babelrc의 내용 파일은 다음과 같습니다.

{
    "presets": [
        "es2015"
    ],
    "plugins": [
    ]
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>转化test</title>
    <script src="dist/index.js"></script>
</head>
<body>
    <h3>hello ECMA SCRIPT 6</h3>
</body>
</html>

./src/index.js의 내용은

let name = "liuliu";
console.log(name);

let은 es6의 구문입니다. 간단히 테스트해 보세요.

마지막으로: babel src/index.js -o dist/index.js ( o를 생략하지 마십시오. 그렇지 않으면 결과가 터미널 출력에 직접 나타나며 파일이 생성되지 않습니다.)

.dist/index.js의 변환된 결과를 볼 수 있습니다.

또한 변수 출력을 연 후 볼 수 있습니다. browser;

webpack과 같이 일반적으로 사용되는 구성 요소 도구에는 바벨이 있습니다. 여기서는 일일 테스트나 프로젝트에 대한 단일 참조를 위해 자동 구성 요소 도구를 사용하지 않습니다. 이 기사의 사례를 읽은 후 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

webpack3.x의 입력, 출력, 모듈 분석


Vue2 탭 전환 방법

위 내용은 플러그인 도구를 사용하여 ES6 코드를 ES5로 변환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.