babel-loader 配置


安装

  • 安装:npm i -D babel-core babel-loader babel-preset-env

 

babel-core

把 js 代码分析成 ast (抽象语法树, 是源代码的抽象语法结构的树状表现形式),方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的,如箭头函数,rest 参数,函数默认值等,这种语言层面的不兼容只能通过将代码转为 ast,再通过语法转换器分析其语法后转为低版本 js。

babel-preset-*

babel-plugin-* 代表了一系列的转码插件
有了 babel-plugin 系列,可以按需配置自己想要的特性,若是想搭个 es6 环境,一个个地配置各个插件,我猜你会疯掉。babel-preset 系列就可以满足我们的需求,babel-preset 系列打包了一组插件,类似于餐厅的套餐。如 babel-preset-es2015 打包了 es6 的特性,babel-preset-stage-0 打包处于 strawman 阶段的语法

 

使用

第一步

 

 

/* webpack.config.js */

module: {
rules: [
// exclude 排除,不需要编译的目录,提高编译速度
{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
]
}

 

第二步

在项目根目录中新建.babelrc配置文件

 

 

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM