webpack中使用Babel处理ES6语法

283 阅读1分钟

webpack中使用Babel处理ES6语法

当我们在index.js中写入了一些ES6语法时, 如果我们电脑上的浏览器是低版本的,只支持ES5,那么怎么才能让ES6转化为ES5呢?

1.安装

npm install --save-dev babel-loader @babel/core

npm install @babel /preset-env --save-dev

2.打开webpack.config.js文件

module:{
	rules:[
		{
			test:/\.js$/,
			exclude:/node_modules/,,
			loader:"babel-loader",
			options:{
				presets:[["@babel/preset-env"],{
                    //当chrome版本在67以上,就不需要转化为ES5语法了
                    targets:{
                        chrome:"67",
                    },
					//减少无用的ES5代码
					useBuiltIns:'usage'
				}]
			}
		}
	]
}

3.安装polyfill

npm install --save @babel/polyfill

4.放到index.js文件内

import "@babel/polyfill"

官方文档:babeljs.io/docs/