【vue】babel的介绍以及编写vue文件_vue.esm-browser.js-CSDN博客

本文链接：https://blog.csdn.net/qq_42425551/article/details/123266027

本文介绍了如何利用Babel将ES6转为ES5，详解了Webpack如何与Babel集成处理Vue文件，涉及不同vue版本解析、loader配置及VSCode对.vue文件的支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

是一个单独的工具，与webpack独立，但是可以和webpack一起使用
作用：es6或者 typescript 转化为普通的js代码
场景：比如一个旧浏览器不认识demo.js中的es6的箭头函数

单独使用（不和webpack一起使用时）：

npm install @babel/core  @babel/cli@babel/core  @babel/cli -D
//这样node_modules就有babel相关代码了

npx babel demo.js  --out-dir dist//不改变文件名字时
这样会在项目生成dist/demo.js,并且还是ES6代码
npx babel demo.js --out-file test.js
这样会在项目生成 test.js 还是es6代码

//因为没有使用箭头函数转换相关的插件
npm install @babel/plugin-transform-arrow-functions -D

然后
npx babel demo.js --out-file test.js --plugins=@babel/plugin-transform-arrow-functions

这样就会看到test.js没有了箭头函数，变成了es5的内容,成功！

可以加多个函数转换相关的插件比如
npx babel demo.js --out-file test.js --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-tra

【vue】babel的介绍以及编写vue文件