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

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了【Web全栈课程三】babel的使用脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

Node:中间层

  1. 开发相对小规模的web后台,无法取代javajava高并发的各种特性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版本的版本说明安装成功。

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


babel

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


创建babel编译的工程

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

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

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

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

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

  • 我们可以移除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的配置是根据环境自动进行默认预设。

    {
      @H_865_126@"presets": ["env"]
    }
  • 这个时候再运行npm run build,发现babel将我们的es6代码编译为了es5代码,如下:

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


浏览器运行结果

我们新建一个1.htML引入src的1.js
1.在高级浏览器例如chorme中打开1.html,可以正常执行

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

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

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

脚本宝典总结

以上是脚本宝典为你收集整理的【Web全栈课程三】babel的使用全部内容,希望文章能够帮你解决【Web全栈课程三】babel的使用所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。