发布
登录
注册
一分钟入门 Babel(下一代 JavaScript 语法的编译器)
前端频道

图灵联邦

恒河沙
关注

图灵联邦

0

评论

0

点赞

作者:maomin9761   来源:前端历劫之路|2020-10-15 13:55
img

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比较多,主要让大家体验下升级的感觉。

发布

评论 0