ES6 转换 ES5

发布时间:2021-06-22 22:53:02 浏览量:86 标签: 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转换语法的代 


码)。 



搜索
关于我
吴英赫
最新标签
推广