使用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代码了.

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容