随便聊聊babel
时间：2019-11-07 11:38:49 热度：37.1℃ 作者：网络
最近一直在刷 ts webpack 的包，其中：
fork-ts-checker-webpack-plugin 和 awesome-type-loader 这一对老对手代码差不还是很大的：
fork-ts-checker-webpack-plugin
的源码的时候，看到了它的 babel.config.js：
内容如下：
大部分的项目其实还是用的 .babelrc，比如：
很多人是从vue-cli 3开始配置 babel.config.js 的，当然如果你升级过 babel 到了 7 也应该熟悉。
babel 自己的 repo 也用 babel.config.js 来配置，地址：
https://github.com/babel/babel/blob/master/babel.config.js
部分代码如下，有一个 api 的形参
第一个小问题：
babel 很多人其实用了很长一段时间了，现在的版本是多少呢？
如果你对版本没有概念，其实可以关注 7 这个大版本~
第二个：
必备包 @babel/preset-env
https://babeljs.io/docs/en/next/babel-preset-env.html
This bothmakes your life easier andJava bundles smaller!
还记得之前的 babel-preset-es2015 之类的吗？
preset-env 是一个更好的解决方案~
这里面有一个 targets配置，上面我们配置了：node 环境
这里的 node接受的值：
可以定义对应 nodejs 的版本号：
再回过来看 targets 的值类型：
我们看 element组件库的.babelrc文件：targets.browsers (浏览器环境）
之前官网有一个 note：这样的写法 out 了~
比如：这些值都来自 browserslist
https://github.com/browserslist/browserslist
第三个：@babel/preset-react、@babel/preset-type
这类的插件做语法转换
后面一篇我们会对其插件进行分析学习
typescrip 的：
@babel/plugin-transform-type
react 的：
@babel/plugin-syntax-jsx
@babel/plugin-transform-react-jsx
@babel/plugin-transform-react-display-name
