Webpack Babel 관련 구성에 대한 자세한 해석(자세한 튜토리얼)

이 글에서는 webpack babel의 세부 구성을 주로 소개하고 참고하겠습니다.

Babel이란 무엇입니까

Babel은 JavaScript 컴파일을 위한 플랫폼입니다. 이 플랫폼의 장점은 컴파일을 통해 달성할 수 있다는 것입니다.

1. 차세대 JavaScript(ES6, ES7,...) 코드를 사용하세요. 현재 브라우저가 이를 완전히 지원하지 않더라도

2. React의 JSX와 같은 JavvScript 기반 확장 언어를 사용하세요.

npm i babel-core babel-preset-env babel-loader babel-plugin- 변환 런타임 babel-preset-stage-2 -D

babel 사용 정보

우선 babel-preset-es2015를 사용하여 대체할 수 있습니다. 여기에 없는 전자보다 더 좋고 편리합니다.

babel-polyfill VS babel-runtime VS babel-plugin-transform-runtime

1. 우선, babel-polyfill은 모든 API에 대한 전역 설정입니다. 그리고 그것은 전역 변수를 오염시킬 것입니다.

2. babel-runtime에는 Object.sign()과 같은 필요한 API가 필요합니다. require() 먼저

3. babel-plugin-transform-runtime이 가장 권장됩니다. require()가 필요하지 않으며 전역 오염을 일으키지 않습니다. 게다가 요청 시 패키징되며 완전 자동입니다.

Start

/**** webpack.config.js ****/
// 在规则中增加
{
  test: /\.js$/,
  use: 'babel-loader',
  // 只处理src目录下面的。
  // 你也可以配置一条规则处理node_modules下面的。
  // 我记得swiper不知道哪一版本的直接把原来为编译的es6的语法塞给我，导致浏览器不兼容。
  include:[resolve('../src')]
}
/**** .babelrc ****/
// presets字段设定转码规则
{
 "presets": [
  ["env", {
   "modules": false,
   // 需要支持的环境，可选入： chrome, edge, 也可以node:6.5 ，node:current......
   "targets": {
    "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
   }
  }],
  "stage-2"
 ],
 // babel-transform-plugin转码预设不起作用的内容如：Object.assign()等等
 "plugins": ["transform-runtime"]
}

프리셋으로 풀 수 있는 문법은 무엇인가요? package

babel-plugin-transform-runtime이 해결할 수 있는 구문은 무엇인가요? 패키지

기타. 더보기

마지막으로: Babel은 많은 구성이 필요할 것 같지만 실제로는 공식적으로 단순화한 후에는 그렇게 번거롭지 않습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 글:

Webpack+Babel+React 환경 구축에 대한 자세한 답변(자세한 튜토리얼)

webpack에서 scss 관련 구성에 대한 자세한 소개

Vue에서 프로젝트 컴포넌트 개발(자세한 튜토리얼) )

webpack 다중 항목 파일 패키징 구성 구현 방법

JavaScript에서 다중 상속 구현 방법

왕왕 온라인 고객 서비스 구현 방법에 대해

웹 페이지 마우스 효과 구현 방법(상세) 튜토리얼)

위 내용은 Webpack Babel 관련 구성에 대한 자세한 해석(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!