08.webpack5搭建vue环境(二)

本文详细介绍了如何使用Babel和devServer搭建webpack5的Vue环境,包括Babel的命令行使用、预设、原理,以及如何配置babel-loader和webpack使两者结合,最后展示了vue-loader的使用和解决警告的方法。
摘要由CSDN通过智能技术生成

1.Babel和devServer

(1)什么是babel
babel是一个工具链,主要用于旧浏览器或者环境中ES6以上的代码转换为向后兼容版本的JavaScript;包括语法转换、源代码转换等。

(2)babel命令行使用
babel本身作为一个独立的工具(和postcss一样),不和webpack等构建工具配置来单独使用。
在命令行使用Babel,安装如下库:
@babel/core :babel的核心代码,必须安装;
@babel/cli :可以在命令行使用babel。

 npm install @babel/core @babel/cli -D

新建一个demo.js文件,编辑ES6代码

const message = "helo world";
const name =["abc","123","zmy"];

name.forEach(item => console.log(item));

在命令行中输入npx babel demo.js --out-dir test //生成目录test
npx babel demo.js --out-file test.js //生成test.js文件

但生成的文件依然是ES6语法,代码中有箭头函数,就需要安装箭头函数转换相关的插件:npm install @babel/plugin-transfor

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值