https://blog.csdn.net/weixin_44797182/article/details/127622359

前言
在线转码 https://babeljs.io/repl/#
https://es6console.com/

1.快速入门
(1)ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。
(2)Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
(3)这意味着,你可以现在就用 ES6 编写程序,而不用担心现有环境是否支持。

文件目录如下

2.安装使用
安装命令行转码工具
Babel提供babel-cli工具,用于命令行转码。它的安装命令如下:

npm install -g babel-cli
#查看是否安装成功
babel --version
1
2
3

3、初始化项目
npm init -y

1
2

4、创建文件 src/test1.js,写入es6语法代码(需要转换的文件)
//es6语法
let name = "this is java!"
const title = "张三";
let arr = [1,2,3,4,5,6];
let newarr = arr.map(a=>a*2);
console.log(name);
console.log(title);
console.log(newarr);

1
2
3
4
5
6
7
8
9
5、创建、配置 .babelrc
Babel的配置文件是.babelrc,存放在项目的根目录下,该文件用来设置转码规则和插件

{
"presets": ["es2015"],
"plugins": []
}

1
2
3
4
5
6、安装转码器,在项目中安装
npm install --save-dev babel-preset-es2015

1
2
7、开始转码
执行完之后我们执行babel src -d dist,这个的意思是将src所有的文件都编译成ES2015格式放入dist目录之下。

babel src -d dist
1

熟悉的新风景
关注

————————————————
版权声明:本文为CSDN博主「熟悉的新风景」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_44797182/article/details/127622359

使用Babel将ES6代码转为ES5代码,从而在现有环境执行。的更多相关文章

  1. 利用babel将es6语法转es5的简单示例

    前言 Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持. 文件目录结构 生成包管理配置文件pa ...

  2. es6开发环境搭建,babel 将es6转化成es5

    工欲善其事,必先利其器.所以我们第1节就是搭建一个基本的ES6开发环境.现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成E ...

  3. Webstorm上面通过babel将es6转化为es5

    1.首先创建一个新的文件夹(名为do);2.然后再根目录下面新建一个package.json,只需要写明两个属性即name和version,这个没有必须要和下面我写的一致,可以自行定义. { &quo ...

  4. ES6学习(1)——如何通过babel将ES6转化成ES5

    使用babel编译ES6 babel是一个工具,可以通过多个平台,让js文件从ES6转化成ES5,从而支持一些浏览器并未支持的语法. Insall babel $ sudo npm install b ...

  5. 使用babel将ES6编译成ES5

    现在ES6已经非常成熟了,我的需求很明确,就是只需要将ES6编译成ES5. 项目目录为 借鉴的博客链接为https://blog.csdn.net/suwu150/article/details/77 ...

  6. 使用babel编译器将es6代码转为es5的方法

    1.首先需要安装工具 babel-cli =========  npm i babel-cli -g   install 可以使用i 代替 2.安装插件   npm i --save-dev babe ...

  7. 003_webpack 配合babel 将es6转成es5

    今天接触了webpack,第一次使用webpack进行转码,竟然稀里糊涂就成功了,哈哈. 下面附上流程 创建个文件夹,初始化一下,首先全局安装webpack npm install webpack - ...

  8. webpack用 babel将ES6转译ES5

    webpack webpack.config.js配置文件 module.exports = { entry: './es6.js', // 入口文件路径 output: { filename: &q ...

  9. babel把ES6转化为ES5的时候报错

    Module not found: Error: Can't resolve '@babel/runtime/helpers/asyncToGenerator' in 'e:\Node.js\Node ...

  10. discuz代码转为html代码

    下面附件是来自discuz的一个函数文件(原来是在source/function/function_discuzcode.php位置),已稍微修改: https://files.cnblogs.com ...

随机推荐

  1. 2025盘古石决赛-计算机&手机

    手机取证 分析鸿蒙手机检材,打网球定的日期是?[标准格式:4月5日] 在日历数据中 3月3日 分析鸿蒙手机检材,哪个浏览器搜索过鸿蒙开发教程?[标准格式:百度浏览器] uc数据搜索过 UC浏览器 分析 ...

  2. Spring Cloud Alibaba 微服务架构深度解析

    在Spring Cloud生态体系中,Spring Cloud Alibaba作为国产微服务解决方案,通过整合阿里开源组件,提供了一站式服务注册与发现.配置管理.流量控制等能力.本文从核心组件.技术选 ...

  3. springboot中使用FeignClient调用http请求

    1. 在.pom文件中添加openfeign的依赖 <dependency> <groupId>org.springframework.cloud</groupId> ...

  4. Java源码分析系列笔记-18.Semaphore

    目录 1. 是什么 2. 原理分析 2.1. uml 3. 公平信号量 3.1. 是什么 3.2. 使用 3.3. 原理分析 3.3.1. 构造方法 3.3.1.1. 公平Sync 3.3.2. ac ...

  5. java--Hibernate关联映射

    hibernate 程序执行流程 集合映射 User.java public class User { private int userId; private String userName; // ...

  6. Oracle入门笔记

    数据库迁移 对于数据库迁移来说,如果源数据库与目标数据库版本一致,推荐使用Oracle导入或者pl/sql导入:如果版本不一致,则可以使用sql导入的方式. 创建表空间 create tablespa ...

  7. Java中==与equals()函数的区别

    前段时间写网站,在servlet中要对用户输入的密码做判断,就出现一个很奇怪的现象:if条件句中如果用"=="作判断条件,就没法通过验证,而一换成equlas()函数,就完美解决了 ...

  8. java 各个文件夹的含义

    简介 java 后端项目常常会使用 类似dao, service, 之类的文件夹, 这些文件夹之间是如何协作的呢?? SpringMVC的层: DAO, Service, Controller, Vi ...

  9. SciTech-EECS-BigDataAIML: SVD(奇异值分解) + Eigenvalue Decomposition(特征值分解)

    SciTech-EECS-BigDataAIML: SVD(奇异值分解) Singular Value(奇异值) 就是 Eigenvalue 的平方根. SVD 线性代数皇冠上的明珠 熟知SVD, 可 ...

  10. I2C协议背景知识简介与FTDI的FT4232H配成USB to I2C(MPSSE)使用实例

    MPSSE Application Example: http://ftdichip.cn/Support/SoftwareExamples/MPSSE.htm MPSSE: AN_129 FTDI ...