babel再次教会除了python有很多是更新后不和上一代兼容的。
简单讲 Babel 是 Javascript 编译器 ,将 ES6,ES7 ,ES8 转换成 浏览器都支持的ES5 语法,并提供一些插件来兼容浏览器API的工具。是怎么实现的勒, Babel 会将源码转换 AST(抽象语法树)之后,通过便利AST树,对树做一些修改,然后再将AST转成code,即成源码,通俗讲就是整了个容,浏览器觉得挺漂亮的,让代码在浏览器上耍撒
写在前言:随着越来越多的人投身互联网行业,“老师”层出不穷,没有对前辈不尊敬的意思,只是每个人遇到的情况不同,很多时候更需要自己去读控制台的错误信息,而不是单纯的复制下来去百度。
昨晚在学习babel的时候,因为视屏是在去年录制的,过了一年很多配置更新了,于是参照b站视屏下面的带佬的教程,也有很多人表示方法很好用
可是到了我这里就成了
反复重装了@babel/core、@babel/preset-env、@babel/runtime、@babel/plugin-transform-runtime、@babel/preset-react,又开始报错babel-loader版本不对,应该对应@babel/core7,弄了一晚上没弄出来,@生生如弈的教程在用loader7替换8的时候babel-core的6和7同时存在也会发生冲突。
扯远了,回到正题,学习任何一个框架、语言、库,最好的方法都是先去啃它的官方文档。传送门->
建议都安装最新的版本。(哪怕和视屏教程不符,毕竟现在技术更新换代,真的很快)
简单的说,昨晚一晚上的错误在于
- 升级到babel7后,所有的
babel-core
都变成了@babel/core
形式
如果硬要像上述截图中一定要使用babel-loader7不安装最新的话,那安装的所有插件都要用-
形式的。
下面是我最终的配置
- @babel/core AST转换的核心
- @babel/cli 打包工具
- @babel/plugin* Babel 插件机制,Babel基础功能不满足的时候,手动添加些
- @babel/preset-env 把许多 @babel/plugin 综合了下,减少配置
- @babel/polyfill 把浏览器某些不支持API,兼容性代码全部导入到项目,不管你是不是用到,缺点是代码体积特别大
- @babel/runtime 把你使用到的浏览器某些不支持API,按需导入,代码少
学前端千万不要怕麻烦!
- 本文作者: Raphael_Li
- 本文链接: https://lifei-2019.github.io/babel/
- 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!