html中babel编译vue,Vue学习之Babel配置(十六)

一、Babel:  (官网:https://www.babeljs.cn/docs/)

1、Babel 是一个 JavaScript 编译器;

2、Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。

3、 Babel的作用:

①、语法转换

②、通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)

③、源码转换 (codemods)

二、Babel配置思路:

在webpack中,默认只能处理 一部分ES6的新语法,一些更高级的ES6或者ES7 语法,webpack是处理不了的;这时候,就需要借助于第三方的 loader ,来帮助webpack 处理这些高级的语法;当第三方loader 把高级语法转为低级语法之后,会把结果交给 webpack 去打包到bundle.js中;

通过Babel ,可以帮我们将高级的语法转换为 低级的语法:

1、在webpack 中,可以运行如下两套命令,安装两套包,去安装babel 相关的loader功能:

①、第一套包:

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

②、第二套包:

cnpm i babel-preset-env babel-preset-stage-0 -D

2、打开 webpack 的配置文件,在module节点下的rules 数组中,添加一个新的匹配规则:

①、

{ test :/\.js$/, use :'babel-loader', exclude:/node_modules/ }

②、注意:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值