babel学习记录

一、babel相关文件说明

1. babel.config.js 与 .babelrc 区别：
   全局配置 (babel.config.js) 和局部配置 (.babelrc)

2. babel与polyfill 区别：
   babel只转换语法， 比如 像箭头函数，babel是能处理成 function这种
   但是像Array.from promise 这些 新的原生api方法，是需要引入polyfill

3. core-js@2 与core-js@3区别：

core-js 2 封版于 1.5 年之前，所以里面只有对 1.5 年之前 feature 的 polyfill，最近 1.5 年新增的feature 都不支持，也就存在因为新功能没有 polyfill 于是在旧浏览器里失败的风险。

但core-js@3安装很可能会失败

4. Vue 兼容ie 使用transpileDependencies属性

node_modules里的依赖默认是不会编译的,会导致es6语法在ie中的语法报错,所以需要在vue.config.js中使用transpileDependencies属性配置node_modules中指定哪些文件夹或文件需要编译.

transpileDependencies可接受字符串或者正则类型, 但尝试发现直接写文件夹名称无效，比如 [‘element-ui’]
使用正则匹配有效，格式如下：

    transpileDependencies: [
        /[/\\]node_modules[/\\](.+?)?element-ui(.*)[/\\]src/,
        /[/\\]node_modules[/\\](.+?)?element-ui(.*)[/\\]package/,
        /[/\\]node_modules[/\\](.+?)?f-render(.*)/,
        /[/\\]node_modules[/\\](.+?)?quill-image-drop-module(.*)/,
        /[/\\]node_modules[/\\](.+?)?vue-ele-form(.*)/,
        /[/\\]node_modules[/\\](.+?)?vue-ele-form-bmap(.*)/,
        /[/\\]node_modules[/\\](.+?)?vue-baidu-map(.*)/,
        /[/\\]node_modules[/\\](.+?)?vue-ele-upload-image(.*)/,
    ],

二、 Vue-cli3 项目在安卓低版本系统和 IE 上白屏问题解决

Vue-cli3 Es6语法兼容处理