我们使用现代浏览器的话，很多像是es7、es8的语法，可能都是已经支持了，但是放在ie上，这些方法都是通通不认识的，因此我们就需要一个工具来将这些ie浏览器不认识的语法转换成ie所认识的，那么知道了这个babel的包，其实就很简单了，我们直接这样在vue中的main.js中引入这个包即可
import "babel-polyfill";
但是这样引入的话，在打包的时候，包可能会比较大，会影响到前端页面的打开速度，所以又出现了一种按需转译的用法，即当我们需要用到转译代码的时候，会替我们转译，并不是一次转译所有的代码，这种用法同学们应该也是非常熟悉了，就是所谓的“懒加载”，和vue的路由懒加载是一个道理，那么如何使用呢，首先下载的是一个@babel/polyfill的包，这个包的话也是一个翻译代码的作用，但是可以进行配置来实现按需加载
npm i @babel/polyfill -D
然后我们需要在babel.config.js中进行按需加载的配置
presets: [
'@vue/app',
[
'@babel/preset-env',
{
'useBuiltIns': 'entry'
}
]
]
注意这个@babel/preset-env是一个有关环境变量的包，这个包在你使用vue脚手架3.0创建项目时就会自带这个包了，所以是不需要下载的，最后在main.js中引入我们之前下载的包就可以了。
import "@babel/polyfill";
这样就大功告成了，打包的话也可以看到打包体积变小了
网友评论