javascript主要处理兼容性问题,js的兼容性还是靠babel

babel

安装基本配置

只能转换基本语法，如Promise就不能再转换了

  1. npm i  babel-loader @babel/core @babel/preset-env -D

配置文件

  1. .babelrc
  2. babel.config.json
  1. // .babelrc
  2. // 早期使用较多的配置方式，但是配置Monorepos项目比较麻烦
  4. // babel.config.json
  5. // 可以直接作用于Monorepos项目的子包，更推荐使用

相关插件

@babel/core

  1. // 编译核心插件
  2. // 包括了@babel/parser @bable/traverse @babel/generator

@babel/preset-env

  1. // 废除了babel-preset-stage0、babel-preset-stage1 等
  2. // preset-env 默认会支持所有 es 标准的特性 
  3. // 如果没进入标准的，不再封装成 preset，需要手动指定 plugin-proposal-xxx

polyfill 兼容性处理

1. 全部js的处理,引入即可

问题是我只要解决部分兼容性问题，但是被全部引入

  1. @babel/polyfill

在babel7.4版本之后就不建议如此应用

  1. import @babel/polyfill 
  2. // 等同于
  3. import 'core-js/stable';
  4. import 'regenerator-runtime/runtime';

2.按实际使用加载

新建 .babelrc文件,配置如下所示

npm i core-js@3 @babel/preset-env @babel/core @babel/plugin-transform-runtime @babel/runtime -D

  1. presets:[
  2.   [
  3.     '@babel/preset-env',
  4.     {
  5.       // 按需加载
  6.       useBuiltIns:'usage',
  7.       corejs:{
  8.         version:3
  9.       }
  10.     }
  11.   ],
  12.   "plugins": [
  13.   [
  14.    "@babel/plugin-transform-runtime",
  15.    {
  16.     "corejs": false // 默认值，即使如此依然需要 yarn add @babel/runtime
  17.    }
  18.   ]
  19.  ]
  20. ]

描述一下useBuiltIns 三种不同

  1. //useBuiltIns:'usage', 
  2. {
  3.  "presets": [
  4.   [
  5.    "@babel/preset-env",
  6.    {
  7.     "useBuiltIns": "entry",
  8.     "corejs": {
  9.      "version": 3, 
  10.      "proposals": false
  11.     }
  12.    }
  13.   ]
  14.  ],
  15.  "plugins": [
  17.  ]
  18. }
  1. // useBuiltIns:'entry',
  2. {
  3.  "presets": [
  4.   [
  5.    "@babel/preset-env",
  6.    {
  7.     "useBuiltIns": "entry",
  8.     "corejs": {
  9.      "version": 3,
  10.      "proposals": false
  11.     }
  12.    }
  13.   ]
  14.  ],
  15.  "plugins": []
  16. }
  17. // 需要入口文件导入这两个包
  18. import "core-js/stable"; // core-js   
  19. import "regenerator-runtime/runtime";  //regenerator-runtime会在安装@babel/preset-env的时候自动安装
  1. useBuiltIns:'false',

目前，babel处理兼容性问题有两种方案：

runtime方案。

需要下载

  1. babel-loader @babel/core  @babel/preset-env @babel/runtime-corejs3 @babel/plugin-transform-runtime
  1. {
  2.   "presets": [["@babel/preset-env"]],
  3.   "plugins": [
  4.     [
  5.       "@babel/plugin-transform-runtime",
  6.       {
  7.         "corejs": {
  8.           "version": 3,
  9.           "proposals": true
  10.         },
  11.         "useESModules": true
  12.       }
  13.     ]
  14.   ]
  15. }

polyfill方案

  1. babel-loader @babel/core  @babel/preset-env  core-js@3  @babel/runtime  @babel/plugin-transform-runtime
  1. module.exports = {
  2.   presets: [
  3.     [
  4.       "@babel/preset-env",
  5.       {
  6.         useBuiltIns: "usage",
  7.         corejs: {
  8.           version: 3,
  9.           proposals: false,
  10.         },
  11.       },
  12.     ],
  13.   ],
  14.   plugins: [
  15.     [
  16.       "@babel/plugin-transform-runtime",
  17.       {
  18.         corejs: false, // 默认值，即使如此依然需要 yarn add @babel/runtime
  19.       },
  20.     ],
  21.   ],
  22. };

webpack.config.js

  1. module: {
  2.     rules: [
  3.       {
  4.         test: /\.js$/,
  5.         use: [{ loader: "babel-loader" }],
  6.         exclude: "/node_modules/",
  7.         cacheDirectory:true
  8.       },
  9.     ],
  10.   },