ES6 转换 ES5

 ES6 转 ES5

1.  安装

npm install babel-core babel-loader@7.1.5 babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 -D

index.js里面写入

const fn = () => {

  console.log(123)

}

配置loader 

{test:/\.js/,use:['babel-loader'],exclude:/node_modules/} 

exclude表示排除掉 node_modules下载的依赖项。这样可以加速网站开发，而且我们也只需要对我们的项目src 源文件进行编译即可。

  新增.babelrc文件 

 json

{ 

    "presets":["env","stage-0"], 

    "plugins":["transform-runtime"] 

} 

新增并在index.js中引入main.js，然后使用es6语法 

js

const fn = () => {

  console.log(123)

}

fn()

执行命令编译   npm run start 

编译后的结果

var fn = function fn() {\n    console.log(123);\n}

至此关于webpack的基本配置已经到这里。

解释 

**babel-present-env** 仅仅包括 babel-present-2015 、2016、2017，不包括： babel-stage-x ，也不包括 babel-polyfill 

**babel-present-env** 仅仅转换 新版的语法 如：箭头函数，并不转换新版api 如：Array.include转换新版 

api及抹平浏览器之间的差异（兼容ie）需要 babel-polyfill 

**babel-polyfill** 会污染全局，比较暴力。而 `babel-plugin-transfrom-runtime` 是哪里需要就给 

哪里转换。 

**babel-plugin-transform-runtime** 主要做了一下三件事： 

当你使用 `generators/async` 函数时，自动引入 `babel-runtime/regenerator` （使用 regenerator 

运行时而不会污染当前环境） 。 

自动引入 `babel-runtime/core-js` 并映射 ES6 静态方法和内置插件（实现polyfill的功能且无全局污染， 

但是实例方法无法正常使用，如 “foobar”.includes(“foo”) ） 。 

移除内联的 Babel helper 并使用模块 `babel-runtime/helpers` 代替（提取babel转换语法的代 

码）。