大家都知道js十分依赖浏览器(或Node环境),不同浏览器对js的支持不尽相同。现如今ECMAScrip标准的更新已经到了一年一次的节奏,
Babel 就是为了解决这个问题 ,它可以将使用新标准的JavaScript代码转换为浏览器支持可以运行的JavsScript(ES5)代码。
1 | //例如babel将这段代码 |
在webpack中配置Babel
假设在react项目配置webpack:
一、安装npm包:
1 | npm install --save-dev babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-preset-react webpack-preset-babel-stage-0 |
二、在webpack配置文件中添加规则:
1 | module: { |
三、 在项目根目录创建名为.babelrc
的文件,这是Babel的配置文件
在配置文件中安装插件(plugins)或预设(presets,也就是一组插件)来指示 Babel 去做什么事情。在下面配置中:
babel-preset-es2015 打包了 es6 的特性;
babel-preset-stage-0 打包处于 strawman 阶段的语法;
babel-preset-react 打包react全家桶语法;
Babel 几乎可以编译所有时新的 JavaScript 语法,但对于 APIs 来说却并非如此。例如: Promise、Set、Map 等新增对象,Object.assign、Object.entries等静态方法,babel-plugin-transform-runtime为了达成使用这些新API。
1 | //.babelrc内容 |