[전단 카드 의 최적화 사고방식 과 방안 03] 업그레이드 babel 7 주의사항

babel 문서
babel 문서
babel 의 간단 한 요약 소개, 추천
babel 7 간단 업그레이드 안내

webpack 을 업그레이드 할 때 babel 을 업그레이드 해 야 한 다 는 것 을 발 견 했 습 니 다. 최근 에 babel 은 비교적 큰 업데이트 가 있 는데 바로 babel 7 입 니 다.

babel 은 간단하게 JavaScript 에서 es 2015 / 2016 / 2017 / 2046 의 새로운 문법 을 es5 로 전환 시 켜 저급 운영 환경 (예 를 들 어 브 라 우 저 와 node) 을 인식 하고 실행 할 수 있 도록 한다.

엄 밀 히 말 하면 babel 도 더 낮은 규범 으로 바 뀔 수 있다.그러나 현재 상황 으로 볼 때 es5 규범 은 대부분의 브 라 우 저 를 커버 할 수 있 기 때문에 일반적으로 es5 로 전환 하 는 것 은 안전 하고 유행 하 는 방법 이다.

이번 업그레이드 와 관련 된 내용

유지 보 수 를 포기 하 는 node 버 전 0.10, 0.12, 4, 5

를 지원 하지 않 습 니 다.

@ babel 네 임 스페이스 를 사용 합 니 다. 예 를 들 어 @ babel / core

@ babel / preset - env 대신 preset - es 2015 등

@ babel / runtime 변화

업그레이드 과정 에서 다음 과 같은 문제 가 발생 했 습 니 다.
[email protected] requires a peer of webpack@1 || 2 but none was installed
1. 왜 잘못 신 고 했 어

[email protected]웹 팩 의 1 또는 2 에 대한 바늘

높 은 버 전과 낮은 버 전의 babel - loader 를 동시에 설치 하면 오류 가 발생 할 수 있 습 니 다

2. 처리 방법

webpack 1.x | babel-loader <= 6.x
webpack 2.x | babel-loader >= 7.x (recommended) (^6.2.10 will also work, but with deprecation warnings)
webpack 3.x | babel-loader >= 7.1”

1. Plugin / Preset files are not allowed to export objects, webpack 오류 / babel 오류 해결 방법
1. 왜 잘못 신 고 했 어
여기 서 오 류 를 안 고 있 는 것 은 바 벨 의 버 전 충돌 때문이다.
대부분 당신 의 babel 의존 가방 이 호 환 되 지 않 기 때 문 입 니 다.
package. json 의존 목록 을 볼 수 있 습 니 다.
즉, babel 7.0 버 전이 있 는 (@ babel / core, @ babel / preset - react)
bebel - cli 버 전 보기 명령 도 가능 합 니 다 (babel - V)
바벨 6.0 버 전도 있어 요[email protected] , [email protected] , [email protected] )
패키지. json 의존 패키지 에 babel 7.0 버 전이 있 고 babel 6.0 버 전이 있 으 면 이 오 류 를 보고 합 니 다.
두 판본 은 호 환 되 지 않 는 다
2. 처리 방법
babel 에 관 한 모든 가방 을 7.0 버 전 으로 업그레이드 합 니 다.

업그레이드 전 코드

"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-polyfill": "6.26.0",
"babel-preset-env": "^1.2.1",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",

업 그 레이 드 된 코드

"@babel/cli": "^7.5.5",
"@babel/core": "^7.5.5",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.5.5",  //   
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.5.5",
"@babel/register": "^7.5.5",
"@babel/runtime": "^7.5.5", //   
"babel-core": "^7.0.0-bridge.0", // 
"babel-eslint": "^7.2.3",
"babel-loader": "^8.0.0",

3. babelrc 파일 도 수정 해 야 합 니 다.

주요 차이 점 은 바벨 7 의 업그레이드,

stage - * 버 림

import 등 es6 (es - 2015) 에 대한 지원 이 추가 되 었 기 때문에 "@ babel / plugin - syntax - dynamic - import" 를 설치 해 야 합 니 다. "^ 7.2.0" 이 플러그 인

이 동시에 es - 2015 에 대한 지원 은 '@ babel / preset - env' 라 는 플러그 인 에 직접 포함 되 었 으 므 로 다른 플러그 인 을 추가 로 설치 할 필요 가 없습니다.

commts 를 삭제 하고 웹 팩 을 실현 하 는 chunk 파일 의 이름 을 보십시오

따라서. babelrc 파일 의 수정 은 주로 이전의 내용 을 삭제 하고 업 그 레이 드 된 플러그 인 을 추가 하 는 것 입 니 다.

그리고 ["env", {"modules": false}] 이 말 은 잠시 이해 가 되 지 않 습 니 다.

업그레이드 전 코드

{
  "presets": [
    ["env", { "modules": false }],  //      
    "stage-2" //      
  ],
  "plugins": ["transform-runtime"],  //      
  "comments": false,  //      
  "env": {
    "test": {
      "presets": ["env", "stage-2"],  //      
      "plugins": [ "istanbul" ]
    }
  }

업 그 레이 드 된 코드

{
  "presets": [
    "@babel/preset-env", //       
  ],
  "plugins": [
    "@babel/plugin-transform-runtime", //       
    "@babel/plugin-syntax-dynamic-import" //       
  ],
  "env": {
    "test": {
      "presets": ["env"],  //      
      "plugins": [ "istanbul" ]
    }
  }

4. webpack. base. conf. js 파일 도 수정 해 야 합 니 다.

loader 부분, js 분석 부분 에서 import () 의 es6 코드 를 분석 해 야 하기 때문에 options 에 presets: ['@ babel / preset - env'] 를 추가 합 니 다. @babel / preset - env 에는 es6 에 대한 해석 내용 이 있 습 니 다.

@ babel / preset - es 2015 홈 페이지 에 폐 기 된 플러그 인

이 언급 되 어 있 습 니 다.

    ...
    test: /\.js$/,
    exclude: /node_modules(?!\/quill-image-drop-module|quill-image-resize-module)/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')]
    options: { //     
      presets: ['@babel/preset-env']
    }

2.Can't resolve '@babel/runtime/helpers/objectSpread' and '@babel/runtime/helpers/typeof'
1. 왜 잘못 신 고 했 어

"@ babel / plugin - transform - runtime": "^ 7.5.5" 를 업 그 레이 드 했 습 니 다. 이 플러그 인 은 "@ babel / runtime": "^ 7.5.5",

플러그 인 을 동시에 추가 해 야 합 니 다.
해답 링크
홈 페이지 문서 에 도 설명 이 있어 요.
2. 처리 방법

npm add @babel/runtime

3.Requires Babel "^7.0.0-0", but was loaded with "6.26.3"
1. 왜 잘못 신 고 했 어

이 문제 가 발생 한 이 유 는 일부 가방 이 최신 '@ babel / core' 를 지원 하지 않 기 때 문 입 니 다. '^ 7.5.5' 이지 만 낮은 버 전의 babel - core 를 설치 하면 또 잘못 보고 할 수 있 습 니 다. 이 럴 때 이 브리지 버 전이 필요 합 니 다.

The issue with Babel 7's transition to scopes is that if a package depends on Babel 6, they may want to add support for Babel 7 alongside. Because Babel 7 will be released as @babel/core instead of babel-core, maintainers have no way to do that transition without making a breaking change. e.g.

조사 결과 "@ babel / plugin - syntax - dynamic - import": "^ 7.2.0" 플러그 인의 원인

2. 처리 방법

솔 루 션 온라인 링크

브리지 버 전 홈 페이지 링크

    "babel-core": "7.0.0-bridge.0"

마지막 으로 완전한 package. json 파일 을 붙 여 주세요.

"devDependencies": {
    "@babel/cli": "^7.5.5",
    "@babel/core": "^7.5.5",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/polyfill": "^7.4.4",
    "@babel/preset-env": "^7.5.5",
    "@babel/register": "^7.5.5",
    "@babel/runtime": "^7.5.5",
    "ajv": "^6.10.2",
    "autoprefixer": "^6.7.2",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^8.0.0",
    "bpmn-js-properties-panel": "^0.32.1",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.1",
    "es6-promise-polyfill": "1.2.0",
    "eslint": "^3.14.1",
    "eslint-config-standard": "^6.2.1",
    "eslint-friendly-formatter": "^2.0.7",
    "eslint-loader": "^1.6.1",
    "eslint-plugin-html": "^2.0.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^2.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^0.10.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "function-bind": "^1.1.0",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.19.1",
    "less-loader": "4.1.0",
    "mini-css-extract-plugin": "^0.8.0",
    "opn": "^4.0.2",
    "optimize-css-assets-webpack-plugin": "^1.3.0",
    "ora": "^1.1.0",
    "preload-webpack-plugin": "^2.3.0",
    "rimraf": "^2.6.0",
    "script-loader": "^0.7.2",
    "semver": "^5.3.0",
    "stylus-loader": "^3.0.1",
    "url-loader": "^0.5.7",
    "vue-loader": "11.1.4",
    "vue-router": "2.8.0",
    "vue-style-loader": "^2.0.0",
    "vue-template-compiler": "2.5.16",
    "webpack": "^3.8.1",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.16.1",
    "webpack-merge": "^2.6.1"
  },