webpack学习-配置babel(js编译器)

以下是学习笔记:

1.babel的作用是将 新的ES语法 转化为浏览器能识别的语法(语法转换)

1.1-安装包

npm i -D babel-core babel-loader@7 
npm i -D babel-preset-env //env支持ES6,ES7,ES8,相当于告诉babel处理要处理这些新的语法

1.2-配置babel

// 在module下rules中配置babel
      {
        test: /\.js$/,
        use: 'babel-loader',
        // 排除掉不需要 babel 处理的文件路径
        // 一般，都会将 node_modules 排除掉,因为里面全是ES5语法
        exclude: /node_modules/
      }

1.3-在项目根目录下新建.babelrc文件,在里面配置预设信息

{
  "presets": ["env"]

}

1.4-让babel处理那些处于草案阶段还未成为标准的语法

安装包并配置

npm i -D babel-preset-stage-2

{
  "presets": ["env", "stage-2"]

//比如对象的拓展运算符{...obj}不是标准,配置stage-2就可以让babel编译草案阶段还未成为标准的语法,只要能进入草案阶段,几乎就可以确定会成为标准
}

 

2.babel实现浏览器兼容最新版ES的API(transform-runtime或babel-ployfill)

以transform-runtime为例

npm i -D babel-plugin-transform-runtime
npm i -S babel-runtime

在.babelrc中配置

"plugins":[
"transform-runtime"
]