zoukankan      html  css  js  c++  java
  • Babel:JavaScript编译器

    一.介绍:

      Babel是一个Javascript编译器,可以将ES6语法转换成ES5。

      这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持。下面是一个例子:

      //转码前:

      input.map(item => item + 1);

      //转码后:

      input.map(function(item){

        return item + 1; 

      });

    二.使用ES6语法:

    1. 创建项目test:
    2. npm init
    3. cnpm install –save-dev babel-cli: Babel提供babel-cli工具,用于命令行转码。
    4. cnpm install –-save-dev babel-preset-latest:最新的ES6语法都能包含
    5. Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。
    6. 该文件用来设置转码规则和插件,基本格式如下:

        {

                 "presets":["latest"]

          //或者

            "presets":["es2015"]

        }

      7.cnpm install babel-core@5:Babel也可以用于浏览器环境。但是,从Babel 6.0开始,不再直接提供浏览器版本,而是要用构建工具构建出来。如果你没有或不想使用构建工具,可以通过安装5.x版本的babel-core模块获取。

      8.然后,将下面的代码插入网页。

            <script src="node_modules/babel-core/browser.js"></script>

                <!—-浏览器功能: browser-pollfill.js 让浏览器支持所需要的功能-->

        <script src="node_modules/babel-core/browser-pollfill.js"></script>   <script type="text/babel">

          //Your ES6 code

          let a = [1,2],

          b = [...a,'3'];

          document.body.innerHTML = b;

          console.log(b);

        </script>

      9. browser-sync start –server:自动打开浏览器显示

      另外:

    1.  babel in.js –-out-file out.js: 将es6的in.js文件转换成es5并放到out.js中
  • 相关阅读:
    实验 1:Mininet 源码安装和可视化拓扑工具
    Linux bond 网卡主备模式配置
    git常用命令总结
    框架搭建之--配置去除用户输入两边的空格
    性能优化之--数据库缓存
    性能优化之缓存--文件缓存
    网站优化之缓存--页面缓存
    网站优化之缓存--session和cache以及常用缓存应用之间的区别
    MVC请求管道详细总结梳理。
    sql优化记录
  • 原文地址:https://www.cnblogs.com/zhihaospace/p/6243296.html
Copyright © 2011-2022 走看看