会员登录 - 用户注册 - 设为首页 - 加入收藏 - 网站地图 一分钟入门 Babel(下一代 JavaScript 语法的编译器)!

一分钟入门 Babel(下一代 JavaScript 语法的编译器)

时间:2025-11-04 16:35:07 来源:益强数据堂 作者:IT科技 阅读:756次

 ES6转ES5(第一种)初始化项目

npm init --y 

安装依赖

npm install babel-cli -D 

npm install babel-preset-es2015 -D 

在项目中创建并编辑ES6文件

这里只是分钟法使用es6的语法举下例子,看下能否转译成es5语法。入门我们假设取名index.js,编译放在项目根目录的分钟法src文件夹里。 // src/index.js let a = 1; let fun = ()=>{     console.log(a); } 

编辑package.json我们需要自己在scripts字段里添加命令:

build-t :单独编译某个文件 build-d:把一个文件夹内的入门所有文件统一编译到另一个文件夹里(文件夹自动生成,不需要自己创建) build-o:把一个文件夹内的编译指定文件编译到另外的文件夹里(文件夹需要自己创建,可以指定文件名) {   "name": "babel01",分钟法   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {     "build-t":"babel index.js --presets es2015",     "build-d": "babel src -d lib --presets es2015",     "build-o":"babel src/index.js -o dist/index.js --presets es2015"   },   "keywords": [],   "author": "",   "license": "ISC",   "devDependencies": {     "babel-cli": "^6.26.0",     "babel-preset-es2015": "^6.24.1"   } } 

启动编译

npm run <这里是scripts字段的命令> 

下面是编译后的es5文件。

"use strict"; var a = 1; var fun = function fun() {     console.log(a); }; 

ES6转ES5(第二种)其实跟第一种差不多。入门

初始化项目

npm init --y 

安装依赖

npm install babel-cli -D 

npm install babel-preset-es2015 -D 

在项目中创建并编辑ES6文件这里只是编译使用es6的云服务器提供商语法举下例子,看下能否转译成es5语法。分钟法我们假设取名index.js,入门放在项目根目录的编译src文件夹里。

{     "presets": ["es2015"],分钟法     "plugins": [] } 

编辑package.json我们需要自己在scripts字段里添加命令,命令内容与第一种方法的入门一样,这里只不过省了--presets es2015。编译

{   "name": "babel01",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {   "build":"babel src/index.js -o dist/index.js"   },   "keywords": [],   "author": "",   "license": "ISC",   "devDependencies": {     "babel-cli": "^6.26.0",     "babel-preset-es2015": "^6.24.1"   } } 

启动编译

npm run build 

下面是编译后的es5文件。

"use strict"; var a = 1; var fun = function fun() {     console.log(a); }; 

ES6+转ES5这里 ES6+ 说的是ES6、ES7、ES8等。

初始化项目

npm init --y 

安装依赖

npm install babel-cli -D 

npm install babel-preset-env -D 

在项目中创建并编辑ES6文件这里只是使用es6的站群服务器语法举下例子,看下能否转译成es5语法。我们假设取名index.js,放在项目根目录的src文件夹里。

// src/index.js let a = 1; let fun = ()=>{     console.log(a); } 

在项目中创建并编辑.babelrc文件在根目录下创建.babelrc文件。

{     "presets": ["env"] } 

编辑package.json命令内容不只是这一个,根据你需求写,其他命令可以看上面的ES6转ES5(第一种)。

{   "name": "babel01",   "version": "1.0.0",   "description": "",   "main": "index.js",   "scripts": {   "build": "babel src -d dist"   },   "keywords": [],   "author": "",   "license": "ISC",   "devDependencies": {     "babel-cli": "^6.26.0",     "babel-preset-es2015": "^6.24.1"   } } 

启动编译

npm run build 

下面是编译后的es5文件。

"use strict"; var a = 1; var fun = function fun() {     console.log(a); }; 

结语本篇主要介绍了ES6转ES5的两种方法以及ES6+怎样转ES5。不过现在大部分使用ES6+怎样转ES5比较多,主要让大家体验下升级的感觉。服务器托管

(责任编辑:系统运维)

推荐内容
  • 电脑声音服务错误1079的解决方法(探索Windows电脑声音服务错误1079的原因和解决方案)
  • 涂鸦智能集成Mistral AI大模型,加速欧洲AI硬件革新
  • Go语言开发的数据库工具有哪些?
  • Python有哪些函数?Python专业培训|高级Python培训
  • 组装电脑主机的简易教程(一步步教你如何组装自己的电脑主机,轻松实现个性化定制)
  • 山西焦煤 × 曙光网络,让传统矿山插上AI翅膀