webpack은 es6을 es5 모듈로 어떻게 변환합니까?

구성 방법: 1. 가져오기 방법을 사용하여 ES6 코드를 패키지된 js 코드 파일에 넣습니다. 2. npm 도구를 사용하여 babel-loader 도구를 설치합니다. 구문은 "npm install -D babel-loader @babel"입니다. /core @babel/preset-env"; 3. babel 도구의 구성 파일 ".babelrc"를 생성하고 트랜스코딩 규칙을 설정합니다. 4. webpack.config.js 파일에서 패키징 규칙을 구성합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

사악한 IE는 수천년 동안 여전히 구멍을 메워야 합니다

• IE 표준은 html/css, 심지어 js의 사양과도 많이 다릅니다. 따라서 호환성 문제의 상당 부분이 필요합니다. 해결해야 할 문제는 일반적으로 IE의 비호환성을 해결하는 것입니다. 현재 널리 사용되는 ES6 구문 및 사양은 IE 고려 사항을 포기하고 기본적으로 IE 처리를 포기하지만 IE 호환성은 여전히 ​​문제입니다! IE의 사용률은 시장의 1% 미만임에도 불구하고.
• 저희는 편안한 ES6사양을 사용하고 있는데 머리가 아프면 어쩌죠? Webpack은 매우 강력한 패키징 변환 기능인 ES5로 변환 기능을 개발했습니다!

모든 ES6 코드를 사용하세요

• let 문을 작성하고 순회하세요.

console.log("webpack 1");
let date = ["hello", "world", "this", "is", "es6", "code"];

((theDate) => {
    theDate.forEach(item => console.log(item));
})(date)

Chrome 브라우저의 결과입니다.

Firefox 브라우저의 결과입니다.

이것은 ie11 브라우저의 결과입니다:

전혀 놀라운 일이 아닙니다! 한 번 살펴보겠습니다.

• 여기에서는 먼저 가져오기 메서드를 사용하여 ES6 코드를 패키지된 js 코드 파일로 이동하는 수정 작업을 수행합니다.
  원본 index.js:

console.log("webpack 1");
let fun = () => {
    let date = ["hello", "world", "this", "is", "es6", "code"];
    date.forEach(item => console.log(item));
}
//fun() //结果依然刚才一样
export default fun;//es6导出函数，es6模块化知识

@babel/core 문제를 찾을 수 없음

• 이전 설치 및 패키징에 필요한 플러그인 또는 툴킷:

npm install babel-core babel-loader babel-preset-es2015 --save-dev
#因为是开发测试环境，就加了dev，各自根据需要更改保存参数

• 예, 버전 호환성 문제로 인해 최신 8.x 버전의 babel-loader에서는 babel-core 읽기가 변경되었으므로 설치해야 합니다. 해당 일치 버전:

#webpack 4.x | babel-loader 8.x | babel 7.x 最新版本
npm install -D babel-loader @babel/core @babel/preset-env
#webpack 4.x | babel-loader 7.x | babel 6.x 版本
npm install -D babel-loader@7 babel-core babel-preset-env webpack

• 여기서 사용하고 있는 것은 7.js 구성 패키징 규칙입니다:

{
    "presets": [
        "es2015"
    ], 
    "plugins": []
}

• webpack 실행, test.html.babelrc

• Browser 효과 생성:

Chrome

IE

• 코드 IE에서 성공적으로 실행되었습니다

패키징되고 변환된 es5의 모습을 살펴보겠습니다

es6에서의 변환 es5는 끝났습니다.

【관련 추천:

javascript 비디오 튜토리얼

,

프로그래밍 비디오

】

위 내용은 webpack은 es6을 es5 모듈로 어떻게 변환합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!