在Webpack中使用Babel转换ES6代码

第一步:通过npm下载安装必要的依赖包

# 第一套包,相当于babel的转换工具
npm i babel-core babel-loader babel-plugin-transform-runtime -D
# 第二套包,babel的语法
npm i babel-preset-env babel-preset-stage-0 -D

安装第一个包出现警告:

npm WARN babel-loader@8.0.6 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.

意思是没有安装7.0.0版本的babel-loader,解决办法就是卸载当前版本,再重新安装7.0.0版本。

#卸载新版
npm uninstall babel-loader -D
#再安装7.0.0版
npm i babel-loader@7.0.0 -D

第二步:配置webpack.config.js

在module选项中添加新的rule,表示用babel解释.js文件,但node_modules文件夹除外,否则会导致错误:

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

第三步:在项目根目录中新建.babelrc配置文件

在这里插入图片描述
配置文件内容(文件遵循JSON标准,比如不允许使用注释、必须使用双引号等):

{
	"presets": ["env", "stage-0"],
	"plugins": ["transform-runtime"]
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值