如何安装以及配置Bable

1,321 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

路难行,行路难,一身汗水,满心长。脚下百里路,头顶艳阳天。坚定如磐石,信念似火烧。好男儿,人穷志不缺,天道也酬勤。四方走,走四方,一身是胆,豪气壮。前方坎坷途,千难万般阻。心若有明灯,身似般若行。好男儿,大志存高远,四海皆为家。

ECMA 的发展历史

ES6从开始制定到最后发布,整整用了15年。

  • ECMAScript 1.0是1997年发布的。
  • ECMAScript 2.0发布于1998年6月。
  • ECMAScript 3.0 则发布于1999年12月。
  • 2000年 ECMAScript 4.0开始酝酿(没有通过),但大部分内容被ES6继承。
  • 2009年12月ECMAScript 5.0版正式发布。
  • 2011年6月ECMAscript 5.1版发布,并且成为ISO国际标准。
  • 2015年6月,ECMAScript 6正式通过,成为国际标准。

脚本语言的流程图

rURLsf.png

Babel 是什么

Babel 是一个工具链,主要用于在旧的测览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的 JavaScript 代码。以下是 Babel 可以为你做的主要事情:

  • 转换语法
  • Polyfill 实现目标环境中缺少的功能
  • 源代码转换
// Babel Input: ES2015 arrow function
[1,2.3].map((n)=> n + 1);
// Babel Output: ES5 equivalent
[1,2,3].map(function(n) {
 return n+1;
};

安装 Bable

使用以下命令安装 Babel packages:

npm install --save-dev @babel/core @babel/cli @babel/preset-env
​
npm install --save @babel/polyfill

由于npm命令是从外网下载并安装,可能会导致安装过程过长或安装失败等问题。可以使用cnpm命令进行替换。

cnpm install -g @babel/core @babel/cli @babel/preset-env
​
cnpm install -g @babel/polyfill

onpm 命令是由淘宝 NPM 镜像提供的,这是一个完整的 npmjs.org 镜像。使用之前需要先安装cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

验证 npm

rUWZo4.png

成功安装 Babel

rUWWpn.png

配置 Babel

在工程项目的根目录下创建 package.json 配置文件,该配置文件内容如下:

{
"presets": [
 "latest"
],
 "plugins": [],
 "devDependencies" : {
  "babel-cli": "^6.0.0",
  "babel-preset-latest": "^6.24.1"
},
"scripts": {
 "build": "babel src -d lib"}
}

babel-cli 转码

根据 package.json 配置文件在工程的根目录下创建 src 和 lib 两个目录:

  • src 目录:用于放置 ECMAScript 6的代码文件。
  • lib 目录:用于放置通过 Babel 转码后的代码文件。

在src目录下编写 ECMAScript 6 的代码文件后、在命令行提示符中通过如下指令进行转码:

npm run build