【Web全栈课程三】babel的使用

Node:中间层

1. 开发相对小规模的web后台，没法取代java，java高并发的各类特性node没法替代
2. 工具类的应用 *
   官网：http://nodesjs.org

npm: node package manager ，node的包管理器，安装node的时候会自动安装

1. 自动下载、升级
2. 自动下载依赖包

说明：npm原版都很是慢，通常咱们切换为国内的镜像，淘宝镜像：http://npm.taobao.org/
安装包命令：npm install babel

检验是否安装成功，打开控制台node -v、npm -v，返回node和npm版本的版本说明安装成功。

---

babel

历史背景：es6刚刚出来的时候，各大浏览器并不支持es6，所以babel做为polyfill工具使用
官网：http://babeljs.io
当前定位：做为一个编译器，es6->es5

---

建立babel编译的工程

建立一个空的工程文件夹
一、npm init命令，输入后，会让咱们输入不少项目相关信息，完成后生成会生成一个package.json文件。

http://babeljs.io/docs/setup#... 指导了如何安装使用babel-cli
二、npm install --save-dev babel-cli，运行后工程下会生成node_moduls文件夹，里面都是工程的依赖包

• --save-dev的简写是-D，做用是下载依赖包的同时，将依赖包的配置信息写入到package.json文件

• 咱们能够移除node_modules，直接在项目下npm install，就会自动根据package.json文件里面的配置将须要的依赖包下载下来，对于大型项目依赖包不少的状况下能起到很好的管理做用。

三、package.json中的scripts配置，咱们启动一个服务的时候常常须要带不少参数，每次启动都敲一次命令很复杂容易错，所以经过scripts配置执行脚本，经过简单命令启动服务。

• 在scripts中配置"build": "babel src -d build"，说明：babel 源文件 -d 目标文件

• 咱们在src下新建1.js测试文件，内容以下

  let a=12;
  let [b,c]=[5,8];
  const show=()=>{
    alert(a+b+c);
  }
  show();

• 执行npm run build，发现build下生成了一个依旧是es6代码的js文件，babel的引导这里先让咱们试错 = =

四、咱们须要再建立一个.babelrc配置文件

• 执行npm install babel-preset-env --save-dev，安装babel-preset-env依赖包

• 在工程根目录建立.babelrc文件，配置babel的编译选项，提供了presets相似脚手架的功能。env的配置是根据环境自动进行默认预设。

  {
    "presets": ["env"]
  }

• 这个时候再运行npm run build，发现babel将咱们的es6代码编译为了es5代码，以下：

---

浏览器运行结果

咱们新建一个1.html引入src的1.js
1.在高级浏览器例如chorme中打开1.html，能够正常执行

2.在ie7下执行，发现报错了。将引用换成build下的js文件后的，已经编译为es5的js，在ie中成功执行。