为了让我们写的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代码了.