Babel babel-transform-runtime和babel-polyfill一些理解

阳光穿透心脏的1/2处 2021-07-24 16:43 524阅读 0赞

明确Babel作用:
    	Babel的转换分为两部分syntax语法(let, const等)和api(Promise,Set,Symbol,Array.from,async ),Babel仅对syntax进行了转换，对于api的转换我们需要借助以上两个插件来实现。
    
    对语法转换:
    	babel转译语法需要一些plugin,如react,es2015,stage-0,stage-1等等
    		 es2015:表示babel会加载es6相关的编译模块
    		 stage系列集合了一些对es7的草案支持的插件,由于是草案,所以作为插件的形式提供。
    		 	stage是向下兼容 0>1>2>3>4 所包含的插件数量依次减少,stage-0,...
    
    		 
    对api的转换:
    	需要polyfill来转化这些API,babel polyfill有三种:
    	@babel-runtime  
    		缺点:
    			使用的时候会导致helper方法（如：_classCallCheck）重复的定义
    		
    	@babel-plugin-transform-runtime 
    		babel-plugin-transform-runtime实际上是依赖babel-runtime
    		优点:
    			不会污染全局变量,多次使用只会打包一次,依赖统一按需引入,无重复引入,无多余引入
    			解决了@babel/runtime导致的helper方法重复定义的问题。它采用引用的方法，将hepler从@babel/runtime包中引入，解决了重复定义。
    			
    		缺点:
    			不支持实例化的方法Array.includes(x)就不能转化
    
    	@babel-polyfill:
    		babel-polyfill则是通过改写全局prototype的方式实现的
    		babel7.4.0后,这个包被弃用并被两个子包替代:core-js/stable(提供polyfill)和regenerator-runtime/runtime(提供generator和async方法,可以用runtime实现）
    		缺点:
    			@babel/polyfill的转化会造成全局污染
    			体积大
    	
    其他:
    	@babel/preset-env
    		@babel/preset-env根据指定的执行环境提供配置polyfill,之前的stage-X库都已废弃。
    		@babel/preset-env主要是依赖browserslist来设置target进而判断运行环境,然后根据useBuiltIns的配置来决定如何引入polyfill。
    			useBuiltIns属性主要有三个值:usage|entry| false,默认是false
    				false:不自动引入polyfills,也不会转换import "core-js"和import "@babel/polyfill"引用为单独的polyfill。
    				entry:处理在项目入口的引入。注意整个应用(bundle)只能使用一次import "core-js和import "regenerator-runtime/runtime"。如果多次引入会报错。推荐创建一个只包含import声明的单入口文件。
    					理论上useBuiltIns:'entry'这种由入口文件一股脑把所有pollfill全部引入的方式是不推荐的
    				usage:在文件需要的位置单独按需引入,可以保证在每个bundler中只引入一份。
    					这种按需引入应该是最优的处理方式,但是不会处理第三方依赖包的引入模块,所以如果第三方依赖包使用了高级语法而未处理兼容性的话,可能会出bug。
    					
    		    corejs
    		    	corejs:n或corejs:{ version: n, proposals: 布尔 }
    		    	这个配置项只有当useBuiltIns:usage或useBuiltIns:entry时才有效,指定@babel/preset-env引入的core-js版本。
    			    	当使用useBuiltIns:entry时,你可以直接引入指定的polyfill比如import "core-js/proposals/string-replace-all"
    			    	当使用useBuiltIns:usage时,有两种选择：
    			    		1、将shippedProposals设置为’true`
    						2、使用corejs: { version: 3, proposals: true }
    		    		
    		    	
    		    	
    					
    总结:
    	Babel是一个新语法转旧语法的平台,它只对synax进行转义,对于api需要使用其对应的插件进行转化。
    	@babel/polyfill和@babel/plugin-transform-runtime都可以实现api转换。但是前者会污染全局，后者不会。如果不是编写插件或库，可以使用@babel/polyfill，否则请使用@babel/plugin-transform-runtime。
    	当前babel版本最优的使用方式应该是@babel/preset-env搭配@babel/plugin-transform-runtime，能够很好的处理高级语法的兼容性问题。