babel

babel: 官方文档

基本知识

preset-env

babeljs.io/docs/en/bab…

webpack可以做什么？

模块化：eg index.js 可import js，不可import css、image，webpack可通过loader将其转化为模块....

.browserslistrc

位置：根目录~
作用：声明本项目支持的浏览器版本

[production]
> 1%
not ie <= 10

[development]
last 1 chrome version
last 1 firefox version
last 1 safari version

打包后的node_modules，浏览器支持

随着浏览器升级，高版本的浏览器可以支持ES6语法，例如：79.0.3945.88； 那么打包后的module，逐渐开始为仅可以跑在高版本浏览器上（Are you ES5查看模块编译版本）

• 优势：编译后包，体积小，增加编译速度~
• 问题：低版本浏览器不支持~

npm生态问题： 不可按项目中.browserslistrc动态编译

react、vue项目中关于babel的配置

1. react

分为两部分：

1. src文件下

   

2. node_modules

   

   结合.browserslistrc，选择bebel plugin~

2. vue

1. 版本：@vue/cli 4.1.1；
2. 导出webpack config： vue inspect > output.js

webpack中关于bebel的config

可以看到vue中默认是不对node_modules进行编译的，那么如何编译高版本的模块呢？

vue-cli 提供了transpiledependencies，对需要转义的module进行单独的配置~

对比

相对而言，react中关于bebel的配置更加的灵活些~