使用Babel处理ES6语法

为了让我们写的es6代码适用与低版本的浏览器我们可以使用babel将es6的代码转换成es5的代码https://babeljs.io/
，@babel/core(babel与webpack连接)、 @babel/preset-env（将es6转换成es5代码）

目录结构

image.png

index.js:

//写一些es6代码我的目的是将它转换成es5代码而适应低版本浏览器
const arr = [
    new Promise(() => {}),
    new Promise(() => {})
];

arr.map(item => {
    console.log(item);
});

Installation

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

Usage

在webpack.config.js中将devtool:'none'好看结果

module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

新建.babelrc

{
  "presets": ["@babel/preset-env"]
}

从新打包结果:

image.png

babel已经帮我们把写的es6代码转换成了es5代码了.