前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >ES6本地实时转换ES5语法(供学习使用)

ES6本地实时转换ES5语法(供学习使用)

作者头像
砖业洋__
发布2023-05-06 20:19:30
5000
发布2023-05-06 20:19:30
举报
文章被收录于专栏:博客迁移同步

实际上babel是在项目中依托于webpack,这里单独提出来供学习对比语法使用

在线转换如下 babeljs es6console(这个貌似才行) 这里讲解本地转换和本地实时准换,供学习ES6和ES5的语法对比使用

1.确保你已经安装好nodejs 2.创建一个项目文件夹,比如babel-js 3.进入到项目,执行 npm init -y 来初始化package.json,我个人使用的VScode,比较方便 4.在终端Terminal执行命令npm i -D @babel/core @babel/cli @babel/preset-env webpack,当然,我会选择使用cnpm安装比较快 5.在项目文件夹babel-js的根目录创建.babelrc,内容如

代码语言:javascript
复制
{
    "presets": ["@babel/preset-env"]
}

按照上述操作,配置就算完成了,接下来就是写ES6语法转换成ES5的问题了 根目录下创建src目录,新建index.js,写入要转换的语法

代码语言:javascript
复制
// index.js
const PI = 3.14;
const sum = (x, y) => x + y;
const { name, age } = {
    name: "lcy",
    age: 18
}
代码语言:javascript
复制
// index2.js
const PI = 3.1415926;
const sum = (x, y) => x + y;
const { name, age } = {
    name: "lcy",
    age: 18
}

非实时转换

如果不是实时监控语法转换,需要执行一次命令转换一次

1.转换为单个文件

执行如下命令即可 npx babel src/index.js -o dist/test.js 这样就会在dist目录下生成一个test.js,里面就是准换成功的ES5语法了。

当然,如果你的src只有一个index.js,执行命令可以省略这个index.js npx babel src -o dist/test.js,不过这样做就是把src下面的所有的js文件转换成ES5后合并到test.js中,src目录下文件多了容易眼花缭乱,如下图。还是推荐上面一种,不要省略。

2.多个文件分别转换

转换整个文件夹,并且不要合并到一个js中,执行如下命令: npx babel src -d dist 这样对应src文件目录,有多少个js就单独转换为多少个js,不会合并在一个js

实时监控转换

执行如下命令 npx babel src -w -d dist 效果图如下:

在这里插入图片描述
在这里插入图片描述

上面内容的仓库地址:ES6本地实时转换ES5语法代码仓库

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-05-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 非实时转换
    • 1.转换为单个文件
      • 2.多个文件分别转换
      • 实时监控转换
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档