@vue/cli 兼容浏览器版本原理

m0_64572085

已于 2023-02-23 10:34:21 修改

阅读量185

点赞数

文章标签： vue.js javascript 前端

于 2023-02-22 21:30:32 首次发布

原文链接：https://juejin.cn/post/6844903942451642376

版权

前端工程化兼容浏览版本主要工作：

修补（polyfill）不被浏览器支持的js特性（@babel/preset-env 插件集合，其中core-js是babel转码的核心包，其将不被支持的js新特性降级处理成 es5 api，使js特性在不被支持的浏览器中正常运行）

降级处理成 es5 api是什么意思？比如方法在某个浏览器版本中没有Array.flat，则在Array.prototype中增加flat方法，用es5的写法实现flat相同的功能

@babel/preset-env （babel 转换插件）
选项设置：

useBuiltIns: ‘usage’ （可设置为按需修补，即代码中写到什么语法就修补哪个）
corejs：v7.4.0后弃用babel-polyfill,换成core-js修补库，可指定版本。此选项只有在与 useBuiltIns: usage (按需引入) 或useBuiltIns: entry（直接引入）一起使用时才有效

添加特定浏览器特定css前缀或css写法（postcss 中核心插件 Autoprefixer，添加特定浏览器前缀或特定浏览器的css 写法）
以上插件需要知道js特性被浏览器支持的情况，数据源则来自browserslist 和 caniuse 数据库

package.json中的browserslist字段指定需要支持的浏览器版本（或.browserslistrc文件中指定），具体配置见browerslist官网

那么如何确定写的js新特性确实做了降级处理呢？

查询此新特性在哪个ESMAScript 版本中添加的

可在 w3schools.com 中查询 JS
各个版本以及添加的new features 比如 Array.flat() 是在JS 2019 添加的

确定项目中code-js版本、code-js版本增加了哪些JS新特性的polyfill

查看@babel/preset-env 中core-js选项的版本，
上github查看对应版本文档介绍中新添加的特性或在源码中找：

在core-js 2 找不到 flat 的polyfill

尝试在 v3文档和源码中找找

在这里插入图片描述

3.实践验证
以下转自不要肆无忌惮地在你的项目中使用 ES78910 了～

npm init -y

npm i @babel/core @babel/preset-env -D

const babel = require('@babel/core');

const code = `[1, 2, 3, 4, [5, 6, [7, 8]]].flat(Infinity);`;
const ast = babel.transform(code, {
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage',
        corejs: 2
      }
    ]
  ]
});
// 用core-js@2 来看看转码后的结果
console.log(ast.code);

// "use strict";

// [1, 2, 3, 4, [5, 6, [7, 8]]].flat(Infinity);

作者：null仔
链接：https://juejin.cn/post/6844903942451642376
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

const babel = require('@babel/core');

const code = `[1, 2, 3, 4, [5, 6, [7, 8]]].flat(Infinity);`;
const ast = babel.transform(code, {
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage',
        corejs: 3
      }
    ]
  ]
});
// 用core-js@3 来看看转码后的结果
console.log(ast.code);

// "use strict";

// require("core-js/modules/es.array.flat");

// require("core-js/modules/es.array.unscopables.flat");

// [1, 2, 3, 4, [5, 6, [7, 8]]].flat(Infinity);

作者：null仔
链接：https://juejin.cn/post/6844903942451642376
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。