• babel是一个独立的东西,可以单独使用

  • 不同游览器能识别的ES语言标准不同,导致了开发者对不同的游览器使用不同的语言

  • babel的出现,就是为了解决这样的问题,他是一个编译器,可以把不同的标准的语言编译统一的,能被各种游览器式别的语言

  • 由于语言转换工作灵活多样,**babel**的做法和**postcss**,**webpack**差不多,他本身仅提供一些分析功能,真正的转换需要依托于插件完成


babel的安装

babel的核心库 @babel/core npm链接 babel-cli库 @babel/cli npm链接 babel的文档链接 https://www.babeljs.cn/ babel的配置文件 .babelrc
babel预设就是一堆插件的集合

兼容的游览器

@babel/preset-env需要根据兼容的游览器范围来确定如何编译,和postcss一样,可以使用文件.browserslistrc来描述游览器的兼容范围

如果使用@babel/preset-env里面的useBuiltIns配置,会进行新的api转换,需要按core-js

babel插件 文档链接

在webpack中使用babel

  1. npm install --save-dev babel-loader @babel/core
// .webpack.config.js
module.exports = {
    module:[
  rules:[
        { test: /\.js$/, use: 'babel-loader' }
      ]
  ]
}