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에는 다음과 같은 필요한 API가 필요합니다: Object.sign(). 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 개발 환경 설정에 대한 튜토리얼

babel을 사용하여 es6 구문을 es5로 변환하는 간단한 방법

Webpack, Babel 및 React에 대한 지식

위 내용은 Webpack Babel의 세부 구성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!