【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编译的工程

创建一个空的工程文件夹
1、npm init命令，输入后，会让我们输入很多项目相关信息，完成后生成会生成一个package.json文件。

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

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

• 我们可以移除node_modules，直接在项目下npm install，就会自动根据package.json文件里面的配置将需要的依赖包下载下来，对于大型项目依赖包很多的情况下能起到很好的管理作用。

3、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的引导这里先让我们试错 = =

4、我们需要再创建一个.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中成功执行。