webpack4 配置babel兼容js代码、动态Polyfill服务

ゝ一纸荒年。 2021-07-24 17:14 333阅读 0赞

1、下载
    	cnpm install -D babel-loader @babel/preset-env @babel/core
    	全部处理下载:cnpm install -S @babel/polyfill 
    	按需处理下载:cnpm install -S core-js
    	
    		-S的必须生产环境使用
    
    2、配置
    	方式一:webpack.config.js中直接配置
    		module:{
    			rules:[
    		      {
    		        test: /\.js$/,
    		        exclude:/(node_modules|bower_components)/,
    		        loader: 'babel-loader',
    		        options: {
    		          presets: [['@babel/preset-env', { targets: "defaults" }]],	预设,指示babel做兼容性处理,target可以指定版本等参数,具体查看https://babeljs.io/docs/en/babel-preset-env#targets和https://github.com/babel/babel-loader
    		          cacheDirectory:true  开启缓存
    		        }
    		      }
    			]
    		},
    	
    	方式二:
    		创建.babelrc文件,在其中写options对应的配置,键需要添加"",webpack.config.js中只需添加loader和test
    		{
    		  "presets":[	presets是一系列功能的集合,plugins是解析单个功能
    		    "@babel/preset-env",   解析es6等语法
    		    "@babel/preset-react"  解析react相关的语法
    		    "babel-preset-vue"     解析vue相关语法
    		  ],
    		  "plugins":[ 支持功能的小插件,去babel官网查找插件
    		  	[
    		  		["@babel/ plugin-proposal-decorators",{"legacy":true}],	解析装饰器语法
    		  		["@babel/plugin-proposal-class-properties",{"loose":true}]	解析es7中类的写法
    		  		'@babel/plugin-transform-runtime', 避免重复引入兼容代码,提取公共代码引入一次,还需cnpm install --save @babel/runtime
    		  			[
    		  				'@babel/plugin-transform-runtime',
    		  				{
    		  					corejs:false,	值为3或2,polyfill一些方法,即promise等
    		  					helpers:true,	工具函数
    		  					regenerator:true,	Generator函数
    		  					useESModules :true	es6模块
    		  				}
    		  			]
    		  ]
    		}
    
    3、高级语法兼容性如处理Promise
    	全部处理:
    		在入口文件index.js中导入包即可
    		import '@babel/polyfill';
    		
    	按需处理:
    		修改2中配置:
    		
    		module:{
    			rules:[
    		      {
    		        test: /\.js$/,
    		        exclude:/(node_modules|bower_components)/,
    		        loader: 'babel-loader',
    		        options: {
    		          presets: [['@babel/preset-env', {
    		            targets: {
    		              chrome: '60',
    		              firefox: '60',
    		              ie: '9',
    		              safari: '10',
    		              edge:'19'
    		            },
    		            useBuiltIns: 'usage',  按需加入
    		            corejs: {  指定core-js版本
    		              version:3
    		            }
    		          }]],
    		          
    		        }
    		      }
    			]
    		},
    
    方式二:动态polyfill服务(推荐)
    	会根据浏览器user-Agent的不同自动发放polyfill来兼容不同版本,不会重复打包
    	使用:
    		(1)官方polifill
    			<scritp src='https://polyfill.io/v3/polyfill.min.js'></script>
    				如果错误去掉.min
    	    (2)qq提供的polyfill
    	    	http://huayang.qq.com/polyfill_service/v2/polyfill.js?unknown=polyfill&features=Promise,Map,Set
    	    		指定feature后只会判断指定的内容是否兼容,不指定feature将会返回所有

代码示例: