关于babel

目录

介绍

下载

配置 

创建.babelrc文件或者babel.config.js文件

创建.babelrc文件时配置如下

创建babel.config.js文件的话只需要将以上对象抛出即可（作者比较懒！！！）

presets预设

plugins插件

测试

下载

运行 

介绍

babel是一款代码的转码器，他可以将es6的代码转义es5，以便兼容一些比较老旧的浏览器，废话不多说想必能用到babel的应该知道他的作用。

下载

npm install --save-dev @babel/core

配置 

创建.babelrc文件或者babel.config.js文件

创建.babelrc文件时配置如下

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          // 配置Babel转译的目标环境，这里可以指定Android 10.0对应的浏览器版本
          // Android 10.0通常支持ES2017及之前的JavaScript特性
          // 但为了兼容更多设备和浏览器，我们可以选择更旧的ECMAScript版本
          "android": "10.0", // 或者使用更具体的浏览器版本，如 'chrome': '60'
          "chrome": "60",
          "ie": "7" // 如果需要兼容IE浏览器，可以添加此行（但Android 10.0不需要）
        },
        "useBuiltIns": "usage", // 根据代码中的实际使用情况自动引入polyfills
        "corejs": 3 // 指定core-js的版本（如果需要polyfills）
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator"
  ] // 可以在这里添加其他Babel插件
}

创建babel.config.js文件的话只需要将以上对象抛出即可（作者比较懒！！！）

presets预设

1.下载所需预设这里以 @babel/preset-react举例

npm install --save-dev @babel/preset-react

2.预设，即一组预先设定的插件，是babel插件的组合

3.预设中的执行顺序是从最后开始执行，逆序执行（至于为什么这么设计小编比较水）

其中包含 @babel/preset-env @babel/preset-react等等每一个预设都有不同的作用

plugins插件

当预先设定的不足以使用时可以去官网搜索所需的插件babel官方网站

下载所需的插件这里仅仅使用@babel/plugin-proposal-optional-chaining举例他可以将可选链式符？.转成es5

npm i @babel/plugin-proposal-optional-chaining

测试

下载

@babel/cli可以直接在终端使用

 npm install --save-dev @babel/cli

运行 

npx babel 文件名字

特别强调babel转义时期是在打包之后将代码转义的，如果使用了其他框架例如vite一定要在build中配置上转义的目标target！！！ 

例如

 build:{
      cssTarget: 'chrome70', // 注意添加css的低版本兼容，当然也可以配置PostCssPresetEnv
      target: 'es2015', 
    },

最后不出意外就可以转义代码了，如果官网的插件不足以使用可以尝试编写能满足自己需求的插件，如果不能可以找小编给你解决，小编虽然有点懒但是非常乐于助人。（当然是开玩笑的了）