babel的一些简单的理解

背景

一直知道babel是转换es6高级语法的，一些es6中的新语法在低版本浏览器中不能解析，导致语句报错。例如vue项目在ie中运行，简直是头大。。。但是遇到问题时候不会解决，不知道应该怎么配置，现在了解了一下

我是针对babel6理解的，babel7项目中现在没有用，所以没去看呢还

配合webpack的使用

package.json中使用babel

webpack中的配置

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('js')
      .test(/\.js$/)
      .use('babel-loader')
      .loader('babel-loader')
  }
}

项目中都会有一个.babelrc文件或者babel.config.js文件

里面有两个属性

presets：设定转码规则
plugins：当选择的预设里面没有解析更新的api时候，就需要为了这个新的语法提供插件，例如

{
  "presets": [
    "env"
  ],
  "plugins": [
    "syntax-dynamic-import"  // 这个是为了处理路由懒加载使用import语法的插件，因为使用的预设里面没有处理这个
  ]
}

下面是不用插件项目启动的报错

为什么使用了babel-preset-env预设就可以解决语法转换

其实没有一种语法转换都有对应的插件去结局，只是项目中会用到很多语法，不能每一次都去把每一个包都下载去载入，所以有了大佬们的总结，直接将这些包都封装到一个里面，这样我们使用时候就比较方便

下面是babel-preset-env依赖到的包

现在vue-cli3脚手架直接默认配置好了babel，使用的@vue/cli-plugin-babel

但其实和babel-preset-env是一样的，都是预设准备好的，只是@vue/cli-plugin-babel针对项目更全面一些