js兼容性--babel的使用

babel安装

babel可以和构建工具联合使用, 也可以独立使用, 如果需要独立使用babel, 需要安装两个库

• @babel/core: babel核心库, 提供编译所需的api
• @babel/cli: 命令行工具

使用方式

命令行输入
# 按文件编译
babel 要编译的文件 -o 编译结果文件
babel 需要编译的整个目录 -d 编译结果放置的目录

babel本身不做任何事情, 真正的编译需要依托babel插件和babel预设.

babel预设和postcss预设含义一样, 是多个插件的集合体

• 需要一个配置文件.babelrc来设置需要的预设和插件.
• 预设需要根据兼容的浏览器范围来确定如何编译, 需要.browserslistrc来描述浏览器的兼容范围.
• 通常情况下, 预设@babel/preset-env只转换那些已经成为正式标准的语法, 对于某些处于早期阶段, 还没有确定的语法的转换, 需要使用单独的插件.
• 预设和插件同时配置的情况下, 它们的运行顺序是
  1. 插件先运行, 预设后运行
  2. 多个插件运行顺序从前往后
  3. 多个预设运行顺序从后往前

注意: 使用预设等之后, 如果源代码中有较新的语法, 那么需要安装corejs, regenerator-runtime等库

.babelrc文件

{
    "presets": [
        ["@babel/preset-env", {
            // useBuiltIns设置为usage, 会自动加入新的api如Promise等, 此时变编译后的代码需要引入corejs
            // 由于此预设默认使用corejs的版本是2, 所以要增加配置corejs: 3
            "useBuiltIns": "usage",
            "corejs": 3
        }]
    ],
    "plugins": [
        ["@babel/plugin-proposal-class-properties", {
            "loose": true
        }],
        
    ]
}

.browserslistrc文件

last 3 version
> 1%
not ie <= 8