Vue Cli 브 라 우 저 호환성 실천 자세히 알 아 보기

브 라 우 저 시장 점유 율
브 라 우 저 호환성 문 제 를 처리 하기 전에 현재 브 라 우 저 시장 점유 율 이 어떤 지 살 펴 보 겠 습 니 다.👇다음은 statCounter 에서 온 데이터 입 니 다.기본적으로 전 세계 브 라 우 저 시장 점유 율 에 대한 통 계 를 덮어 쓰 고 있 으 며,프론트 엔 드 가 자주 사용 하 는 caniuse 가 끌 어 온 브 라 우 저 데 이 터 는 statCounter 에서 나 온 것 입 니 다.
세계 적 범위

천조 범위

플러스 이동 단

분석 하 다.
통계 데 이 터 를 통 해 알 수 있 듯 이 국내 PC 엔 드 브 라 우 저,QQ 브 라 우 저,Sogou 의 비중 이 높 기 때문에 호환성 처 리 를 할 때 도 이 두 브 라 우 저 를 더 고려 해 야 한다.그러나 QQ 브 라 우 저 와 Sogou 는 모두 크롬의 커 널 을 봉 인 했 습 니 다.이들 의 업 데 이 트 는 보통 크롬의 버 전이 업 데 이 트 됨 에 따라 업 데 이 트 됩 니 다.그러나 이 두 브 라 우 저 는 크롬의 최신 버 전과 동기 화 되 지 않 고 일정한 지연 성 이 있 기 때문에 일반적으로 우리 가 겸 용 할 때 그들 이 사용 하 는 크롬의 커 널 버 전 을 고려 하여 처리 해 야 합 니 다.
Vue CLI3
약술 하 다
특히 최신 역작 인-Vue CLI 3 의 발표 에 따라 팀 도 프로젝트 의 비 계 를 최신 CLI 3 로 업그레이드 시 켰 다.CLI 3 는 많은 새로운 특성 을 가 져 왔 다.예 를 들 어 웹 팩 4 를 지원 하고 시각 화 된 설정 항목 을 지원 하 며 많은 공식 플러그 인 을 포장 하여 시작 하 는 원 가 를 낮 추 는 등 이다.그 중에서 도 브 라 우 저 호환성 에 대한 지원-지역 사회의 최신 도구 와 현대 모델 을 결합 시 켰 다.CLI 3.0 의 브 라 우 저 호환성 처 리 는 주로 세 부분 으로 나 뉜 다.browserlist,poly fill,modern mode(현재 모드).
Broserslist
프로젝트 의 대상 브 라 우 저 범 위 를 지정 합 니 다.이 값 은@babel/preset-env 와 Autoprefixer 등 도구 로 번역 할 JS 특성 과 접 두 사 를 추가 해 야 하 는 CSS 특성 을 확인 합 니 다.

{
 "browserslist": [
  "last 1 version", //        
 ]
}

Browserslist 본질은 일련의 브 라 우 저 에 대한 queries 입 니 다.브 라 우 저의 버 전 을 조회 하면 caniuse 에서 데 이 터 를 끌 어 와 서 조회 합 니 다!개발 자 에 게 프로젝트 가 지원 하 는 브 라 우 저 버 전 을 표준 으로 저장 해 주 는 것 이 좋 습 니 다.설정 에서 이 지원 버 전 을 찾 을 수 있 습 니 다.
다음은 용법 해석.

Transpile
다음은 Vue CLI 3 에 사용 되 는 Babel 프 리 셋-@Babel/preset-env 입 니 다.이것 은 CLI 3 에서 Babel 의 번역 을 지도 하 는 도구 입 니 다.Babel 하면 번역 을 언급 할 수 밖 에 없습니다.다른 언어의 컴 파일 과 달리 번역 은 다음 그림 과 같은 과정 입 니 다.

전체적으로 보면 정적 언어의 컴 파일,예 를 들 어 자바 는 소스 코드 를 바이트 코드 로 컴 파일 하 는데 이 두 가 지 는 서로 다른 추상 적 인 차원 에 있 는 언어 이 고 Transfile 의 양 끝 은 본질 적 으로 같은 차원 의 추상 이다.이것 은 보통 더 높 은 특성 을 지원 하 는 예 를 들 어 ES 2017 의 실현 에서 언어 특성 이 비교적 적은 예 를 들 어 ES5 의 실현 으로 전환 된다.브 라 우 저의 호환성 을 해결 할 때,어느 정도 바벨 번역 에 의존 해서 저 버 전의 브 라 우 저가 일부 새로운 기능 을 지원 하지 않 는 상황 을 해결 해 야 한다.
CLI 3 browserslist 및 babel 을 어떻게 사용 하여 번역 합 니까?
babel 은 JS 파일 을 컴 파일 하 는 도구 입 니 다.지원 하 는 대상 브 라 우 저 에 새 JS 의 새로운 기능 을 컴 파일 하 는 데 사용 합 니 다.babel/preset-env 브 라 우 저 listrc 파일 에서 대상 브 라 우 저 를 불 러 옵 니 다:

"babel": {
 "presets": [
  [
   "@babel/preset-env"
  ]
 ]
}

그리고 babel 은 현재 대상 브 라 우 저가 지원 하 는 코드 에 새로운 표준 JS 문법 기능 을 컴 파일 합 니 다.

const array = [1, 2, 3];
const [first, second] = array;

output：

const array = [1, 2, 3];
const first = array[0],
  second = array[1];

이 곳 의 const 기능 은 대상 브 라 우 저가 지원 하기 때문에 강등 처리 가 필요 없습니다.
**바벨 의 번역 은 다음 과 같은 세 단계 로 간단하게 요약 할 수 있다.**

parser:babel-parser 를 통 해 babel-AST-format 를 바탕 으로 JS 코드 를 AST 로 번역 합 니 다.

transform:모든 플러그 인/presets 는 문법 등 사용자 정의 번역 을 하고 AST

입 니 다.

generator:마지막 으로 generator 를 통 해 번역 후의 문자열 을 생 성 합 니 다.

서로 다른 특성 은 Browserslist 와@Babel/preset-env 를 결합 하여 현재 대상 브 라 우 저가 지원 하 는 특성 에 따라 번역 하고 지원 하지 않 는 특성 에 따라 강등 처리 합 니 다.Babel 자 체 는 복잡 한 화제 이 므 로 나중에 컴 파일 원리 와 결합 하여 다시 깊이 파고 들 여지 가 있다.
Polyfills
Polyfill 은 보통 특성 을 검사 한 후에 JS 코드 를 도입 할 지 여 부 를 결정 합 니 다.대상 브 라 우 저 를 기반 으로 지원 하 는 코드 로 작 성 됩 니 다.

if(browserSupportAllFeatures()) {
 main();
} else {
 loadScript('polyfills.js', main);
}

원 리 는 기본적으로 useBuiltIns:'usage'를 babel/preset-env 에 전달 합 니 다.그러면 소스 코드 에 나타 난 언어 특성 에 따라 필요 한 poly fill 을 자동 으로 감지 합 니 다.최종 가방 에 있 는 poly fill 수량 을 최소 화 했 습 니 다.그러나 이 는 그 중 하나 가 특별한 poly fill 에 의존 해 야 한다 면 기본적으로 babel 이 감지 할 수 없다 는 뜻 이기 도 하 다.

//    
var a = new Promise();

//   
import 'core-js/modules/es6.promise';
var a = new Promise();

Polyfills 에 의존 하려 면 poly fill 이 필요 하 다 면 몇 가지 선택 이 있 습 니 다.(babel-preset-app 에서 왔 습 니 다)
대상 환경 이 지원 하지 않 는 ES 버 전 을 기반 으로 작성 하면 vue.config.js 의 traspile Dependcies 옵션 에 추가 합 니 다.이 의존 을 위해 문법 변환 을 동시에 시작 하고 사용 상황 에 따라 poly fill 을 검사 합 니 다.기본적으로 babel-loader 는 모든 node 를 무시 합 니 다.modules 의 파일.Babel 디 스 플레이 를 통 해 의존 도 를 번역 하려 면 다음 옵션 을 선택 하 십시오.

trasnpileDependencies: [lodash，...]

이 의존 이 ES5 코드 를 전달 하고 필요 한 poly fill 을 명시 적 으로 보 여 준다 면@vue/babel-preset-app 의 poly fills 옵션 을 사용 하여 필요 한 poly fill 을 미리 포함 할 수 있 습 니 다.(등록 es6.promise 는 현재 라 이브 러 리 가 Promise 에 의존 하 는 것 이 매우 보편적 이기 때문에 기본적으로 포 함 됩 니 다.)

// babel.config.js
module.exports = {
 presets: [
  ['@vue/app', {
   polyfills: [
    'es6.promise',
    'es6.symbol'
   ],
   useBuiltIns: 'entry'
  }]
 ]
}

원본 코드 에서 직접 가 져 오 는 대신 poly fills 를 추가 하 는 것 을 추천 합 니 다.이 목록 에 있 는 poly fill 이 browser flist 의 목표 에 필요 하지 않 으 면 자동 으로 제 외 됩 니 다.3.이 의존 이 ES5 코드 를 건 네 주 었 으 나 ES6+특성 을 사용 하고 필요 한 poly fill 을 명시 적 으로 표시 하지 않 았 다 면 useBuiltIns:entry 를 사용 한 다음 입구 파일 에 import'@babel/poly fill'을 추가 하 십시오.브 라 우 저 list 목표 에 따라 모든 poly fill 을 가 져 옵 니 다.의존 하 는 poly fill 문 제 를 걱정 할 필요 가 없습니다.단점:하지만 사용 되 지 않 은 poly fill 이 포함 되 어 있 기 때문에 최종 가방 이 증가 할 수 있 습 니 다.(이것 도 어 쩔 수 없습니다.명시 적 목록 에 필요 한 poly fill 이 없 기 때 문 입 니 다)

//    
import '@babel/polyfill'

//   
import 'core-js/modules/es7.string.pad-start';
import 'core-js/modules/es7.string.pad-end';

현대 모드(현대 모드)
무엇이 현대 모델 입 니까?현대 모델 은 Vue CLI 3 에서 제기 한 것 으로 더 오래된 브 라 우 저 를 지원 하기 위해 육중 한 코드 를 전달 하 는 문 제 를 해결 하기 위해 공식 적 으로 제공 하 는 비계 로 프로젝트 를 구축 한 후 아래 와 같이 실행 할 수 있 습 니 다.

vue-cli-service build --modern

CLI 3 에 내 장 된 Service 서 비 스 는 웹 팩 을 사용 하여 컴 파일 을 통 해 두 가지 유형의 패 키 지 를 만 듭 니 다.하 나 는 현대 판 패 키 지 를 만 들 고 추가 poly fill 을 도입 하지 않 습 니 다.하 나 는 오래된 패키지 로 지원 되 지 않 는 오래된 브 라 우 저 를 대상 으로 브 라 우 저 slist 와 babel-preset-env 의 설정 에 따라 추가 poly fill 을 도입 합 니 다.

현대 가방 은<script type="module">을 통 해 지원 되 는 브 라 우 저 에 불 러 옵 니 다.그것들 은<link rel ="modulepreload">를 사용 하여 미리 불 러 오기 도 한다.

오래된 가방 은<script nomodule>을 통 해 불 러 오 며 ESM 을 지원 하 는 브 라 우 저 에서 무 시 됩 니 다.

출력 대비 현대 모드 사용 하지 않 음:

Vue CLI 3 현대 모델:

modern 방식 을 사용 하면 디 렉 터 리 에 두 가지 가방 이 생 성 됩 니 다.

해명 하 다.

<script src="/xx/sxx.js" nomodule></script>

script 탭 에서 nomodule 특성 을 설명 한 것 은 ES 2015 Module 을 지원 하 는 브 라 우 저 에 게 이 스 크 립 트 를 실행 하지 말 라 고 알려 줍 니 다.이 탭 은 일반적으로 오래된 브 라 우 저 에서 사용 되 며,legacy 표 지 를 가 진 스 크 립 트 를 참조 합 니 다.

<script type="module" src="/xxx/sss/a.js"></script>

script 탭 에서 type 특성의 값 이 module 이 라 고 밝 혔 을 때 브 라 우 저 는 안에 있 는 코드 를 전체 JS 모듈 로 간주 합 니 다.스 크 립 트 내용 의 처 리 는 charset 과 defer 속성의 영향 을 받 지 않 고 코드 의 행 위 는 module 로 지정 되 지 않 았 을 때 와 다 를 수 있 습 니 다.(이전 type 의 값 은 보통 JS MIME 값 으로 HTML 5 에 맞 는 브 라 우 저 에서 스 크 립 트 를 JS 로 표시 합 니 다.그러나 현재 H5 규범 은 개발 자 에 게 불필요 한 MIME 형식 을 제공 하지 않 고 이 속성 을 생략 하도록 요구 하고 있다.)
작은 매듭
Vue CLI 3 은 전체 솔 루 션 을 제공 합 니 다.그 안에 커 뮤 니 티 와 Vue 공식 도 구 를 제공 합 니 다.Browserslist,Babel,@Babel/preset-env 와 현대 모델 을 포함 하여 브 라 우 저 호환성 이라는 큰 구 덩이 를 공동으로 처리 합 니 다.CLI 3 에서 구 축 된 프로젝트 는 Browserslist 를 이용 하여 브 라 우 저 조회(유형 과 버 전 포함)를 한 다음 에 미리 설 정 된 Babel 을 설정 하여 대상 환경 에 대해 소스 코드 를 번역 하거나 Polyfills 를 도입 하여 호환성 문 제 를 해결한다.또한 현대 모델 역시 이러한 설정 과 목표 환경 에 따라 프로젝트 의 모든 새로운 기능 을 지원 하 는 브 라 우 저 와 기능 을 지원 하지 않 는 브 라 우 저 를 실행 하기에 적합 한 두 가지 패 키 지 를 구축 합 니 다.마지막 으로 다음 글 은 Modernizr 와 CLI 3 를 결합 하여 실천 할 것 임 을 예고 합 니 다-<브 라 우 저 호환성 실천-Mondernizer 편>
Reference
Stat Counter
브 라 우 저 H5,CSS 3 기능 지원
대상 브 라 우 저 설정 표
browserlist
Vue CLI3
Babel
Babel AST format
Vue Cli 브 라 우 저의 호환성 실천 에 대한 자세 한 설명 은 여기까지 입 니 다.Vue Cli 브 라 우 저의 호환성 에 관 한 더 많은 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!