前端工程化-babel

127 阅读1分钟

Babel主要将es6语法编写的代码转换为向后兼容的js语法,以便运行在当前和旧版本的浏览器或者其他环境中。

一、安装babel-cli并创建main.js

npm install –global babel-cli image.png

二、插件plugin并创建.babelrc

箭头函数转换:npm install babel-plugin-transform-es2015-arrow-functions image.png image.png

三、预设presets

上述是转换箭头函数,es6还包含其他语法,那就需要很多插件和配置。但此方法太多繁琐,因此这需要预设,简单的说它们就是一组插件及配置的合集。 常见的预设:@babel-preset-es2015、@babel-preset-react、 npm install babel-preset-es2015 image.png image.png

四、垫片polyfill

Babel默认值转换新的js语法,而不是转换新的api。如itertator,set,promise等全局对象,以及定义在全局对象上的方法(Object.assgin) image.png image.png