前言

在打包项目的时候遇到了这种类型的错误    
    
    
，为了更好的解决这种问题     


     


     


     ，了解一下babel相关的知识




 




 




 



，以及如何解决这类问题的方法    
    
    
。

解决办法

在项目的根目录下创建.banelrc文件
   

   

   

，内容为

{ "compact": false, "presets": ["env", "stage-0"], "plugins": ["transform-runtime"] }

针对问题的扩展

1.什么是babel

它是一个可以将javascript语言的语法从最新的语法转换成向后兼容的语法     

     

     

    ，使项目可以在当前和旧版本的浏览器或其他环境中运行     


     


     


     。

2.babel配置

在babel执行编译的过程中 




  




  




  


，会从项目的根目录下的.babelrc文件中读取配置

  


  


  


，该文件主要是对预设(presets) 和 插件(plugins) 进行配置




 




 




 



。

2.1 plugins

该属性是告诉babel要使用那些插件     
     
     
   ，这些插件可以控制如何转换代码
   

   

   

。

Babel默认只转换新的javascript语法  




   




   




   

，而不转换新的API


 



 



 



，比如 Set, Maps, Proxy, Promise 等全局对象     

     

     

    。以及一些在全局对象上的方法(比如 Object.assign)都不会转码 




  




  




  


。这时就需要选择合适的插件进行转码

  


  


  


。

babel提供了三种转换的插件：

1.babel-polyfill 当运行环境中并没有实现的一些方法                 ，它都会通过向全局对象和内置对象的prototype上添加方法来实现的     
     
     
   。这样会造成全局空间污染  




   




   




   

。

2.babel-runtime 它不会污染全局对象和内置对象的原型   




    




    




    
，比如说我们需要Promise


















，我们只需要import Promise from babel-runtime/core-js/promise’即可                ，但它需要每个文件都要家import    



     



     



     ，会造成代码冗余

3.babel-plugin-transform-runtime 它是针对babel-runtime进行了公共方法的抽离



















，减少代码冗余


 



 



 



。

因此我们通常会选择第三种插件进行配置

{ plugins: [ [ transform-runtime, { helpers: ture, // 默认为true    
    
    
，是否开启内联的babel helpers(即babel或者环境本来存在的某些对象方法函数)如：extends     


     


     


     ，etc这样的 在调用模块名字时将被替换名字                 。 polyfill: true, // 默认为true




 




 




 



，是否把内置的东西(Promise, Set, Map)等转换成非全局污染的   




    




    




    
。 regenerator: true, // 默认为true
   

   

   

，是否开启generator函数转换成使用regenerator runtime来避免污染全局域


















。 moduleName: babel-runtime // 默认为 babel-runtime     

     

     

    ，当调用辅助 设置模块（module）名字/路径. } ] ] }

2.2 presets

presets属性告诉Babel要转换的源码使用了哪些新的语法特性 




  




  




  


，presets是一组Plugins的集合                。

babel-preset-env 会根据目标环境选择不支持的新特性来转译    



     



     



     。

{ presets: [ [env, { target: { browsers: [last 2 versions, safari >= 7], // 支持每个浏览器最后两个版本和safari大于等于7版本所需的polyfill代码转换 browsers: > 5%, // 支持市场份额超过5%的浏览器 chrome: 56, // 支持指定浏览器版本 "node": "current" // 如果通过Babel编译Node.js代码的话

  


  


  


，可以设置支持当前运行版本的nodejs



















。 }, modules: false // 启用将ES6模块语法转换为另一种模块类型    
    
    
。将该设置为false就不会转换模块     


     


     


     。默认为 commonjs.但是现在webpack都帮我做了这件事了     
     
     
   ，所以我们不需要babel来做  




   




   




   

，因此需要在babel配置项中设置modules为false. "include": ["transform-es2015-arrow-functions", "es6.map"] // 包含一些插件 "exclude": ["transform-regenerator", "es6.set"] // 排除一些插件 }] ] }

2.3 compact

参数类型：Boolean | “auto    
    
    
” 默认值：“auto     


     


     


     ” 该配置选项引导 babel 是否开启紧凑模式


 



 



 



，紧凑模式会省略所有可选的换行符和空格. 当配置选项是




 




 




 



”auto“的时候                 ，babel 会根据文件的字符数判断   




    




    




    
，当字符长度 code.length > 50,000 时 会开启紧凑模式