이번에는 플러그인 도구를 사용하여 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 (이 두 개를 로컬로 설치);
프로젝트 디렉터리:
.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
