08.webpack5搭建vue环境(二)

最新推荐文章于 2024-06-25 10:57:16 发布

phoebemeng

最新推荐文章于 2024-06-25 10:57:16 发布

阅读量423

点赞数

分类专栏： vue 文章标签： vue.js 前端 webpack

本文链接：https://blog.csdn.net/phoebemeng/article/details/126497610

版权

本文详细介绍了如何使用Babel和devServer搭建webpack5的Vue环境，包括Babel的命令行使用、预设、原理，以及如何配置babel-loader和webpack使两者结合，最后展示了vue-loader的使用和解决警告的方法。

摘要由CSDN通过智能技术生成

（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

关注

专栏目录