# 在线编译

http://babeljs.io/repl



# babel-cli 安装入门

http://babeljs.io/setup#installation



# babel-cli 使用手册

http://babeljs.io/docs/en/babel-cli/

# babel docs（必读重点）
http://babeljs.io/docs/en/babel-cli

由于官方一直在变动package名，所以一切参考官方为主。

安装：$ npm install --save-dev @babel/cli @babel/core @babel/preset-env @babel/preset-react

.babelrc

{

  "presets": ["@babel/preset-env", "@babel/preset-react"]

}

babel-cli 简单的使用方法

// --out-dir

$ babel ./src -d ./dist

// --out-file

$ babel ./src/index.js -o ./dist/index.js

// npx

$ npx babel ./src/ -d ./dist/

// --watch

$ npx babel ./src/ --watch -d ./dist/

// --source-maps

$ npx babel ./src/ --watch -d ./dist/  --source-maps

//  --ignore

$ npx babel ./src/ --watch -d ./dist/  --source-maps --ignore spec.js,test.js

实战： react 超轻量级 html 版

.babelrc

{

  "presets": ["@babel/preset-env", "@babel/preset-react"]

}

index.html

<!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="UTF-8">

    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.production.min.js"></script>

    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.production.min.js"></script>

    <title>Document</title>

</head>

<style>

</style>

<body>

    <div id="app"></div>

    <div id="navbar"></div>

    <div id="Welcome"></div>

</body>

<script type="text/javascript" src='dist/index.js'></script>

</html>

src/index.js

ReactDOM.render(
　　 <h1> Hello, world! < /h1>,

    document.getElementById('app')

);

var nav_li = ['最新电影', '最新评论'];

ReactDOM.render( <

    ul > {

        nav_li.map(function(item) {

            return <li> <a href = '#'> { item } </a></li> ;

        })

    } </ul>,

    document.getElementById('navbar')

)

class Welcome extends React.Component {

    render() {

        return <h1> Hello, { this.props.name } </h1>;

    }

}

ReactDOM.render( 
    <Welcome name = "Sara" /> ,

    document.getElementById('Welcome')

);

执行命令： $ npx babel ./src/ -d ./dist/  --source-maps

打开index.html，效果如下说明编译成功了

正式成功之后，就可以使用--watch参数啦：$ npx babel ./src/ -d ./dist/ --watch  --source-maps

温故而知新 babel-cli 的相关使用的更多相关文章

  1. ES6相关新特性介绍

    你可能已经听说过 ECMAScript 6 (简称 ES6)了.ES6 是 Javascript 的下一个版本,它有很多很棒的新特性.这些特性复杂程度各不相同,但对于简单的脚本和复杂的应用都很有用.在 ...

  2. 关于babel官网的学习

    提起babel,前端er大概都不陌生.但是为什么要有babel呢?解决了什么问题?怎么使用babel呢?注意点在哪?以下就从这几个方面总结一下我关于babel学习的结果吧. 为什么要有babel呢? ...

  3. JavaScript Transpilers: 为什么需要用它们？Babel的使用介绍。

    英文原文 https://scotch.io/tutorials/javascript-transpilers-what-they-are-why-we-need-them 摘译(文章内的代码有些过期 ...

  4. babel使用入门以及使用webpack+babel来"编译"你的JS代码

    Babel是一个广泛使用的转码器,可以将ES6代码转为ES5,从而在现有的环境中执行. 这是一个开端,以后遇到问题,也会持续记录. 一.babel配置 官网有更详细的配置教程:https://www. ...

  5. 前端利器躬行记（2）——Babel

    Babel是一个JavaScript编译器,不仅能将当前运行环境不支持的JavaScript语法(例如ES6.ES7等)编译成向下兼容的可用语法(例如ES3或ES5),这其中会涉及新语法的转换和缺失特 ...

  6. 跨平台编程相关技术资料及笔记.md

    目录 跨平台编程技术选型 ## 需求 最终选定的技术方案:uni-app 混合或跨平台编程相关资料 ## uni-app 官网 相关资料 个人笔记 个人经验 ## taro 官网 相关资料 ## Ch ...

  7. Babel（1）认识Babel

    阅读文档 Babel中文网 关于 Babel 你必须知道的 如何写好.babelrc?Babel的presets和plugins配置解析 不容错过的 Babel 7 知识汇总 一口(很长的)气了解 b ...

  8. webpack，Babel，babel-loader的关系

    本文将要介绍 webpack,Babel,babel-loader 的关系.理清楚他们各自做了什么事情. 通常我们新建一个项目,会先配置webpack,然后配置babel:babel是一个编译工具,实 ...

  9. Babel快速入门

    作者:姜瑞涛 Github仓库:https://github.com/jruit/babel-tutorial 博客:姜瑞涛的官方网站 原文链接:https://www.jiangruitao.com ...

随机推荐

  1. 使用Json.Net解决MVC中各种json操作

    最近收集了几篇文章,用于替换MVC中各种json操作,微软mvc当然用自家的序列化,速度慢不说,还容易出问题,自定义性也太差,比如得特意解决循环引用的问题,比如datetime的序列化格式,比如性能. ...

  2. TQ2440开发板挂载U盘出现乱码

    解决方法:配置内核 make menuconfig File Systems --->      DOS/FAT/NT Filesystems  --->         (utf8) D ...

  3. Hibernate缓存研究

    1. 什么是缓存? 数据库的缓存指的是应用程序和物理数据源之间的数据.即把物理数据源的数据复制到缓存.有了缓存,可以降低应用程序对物理数据源的访问频率,从而提高效率.缓存的介质一般是内存,也可以是硬盘 ...

  4. CentOS7系统安装Nginx进行跨域处理

    1 打开终端 依次输入以下命令: yum install nginx vi /etc/nginx/nginx.conf 然后编辑修改该文件中代码,以下是修改后的代码全文: # For more inf ...

  5. Bootstrap定制开发

    Bootstrap作为目前很受欢迎的前端框架,越来越多的网站开始使用基于Bootstrap框架进行开发. 1.定制开发方法 (1)Bootstrap定制开发可以使用LESS和Grunt实现定制化 (2 ...

  6. ACE .i .inl文件（转）

    在ACE的源代码目录里,有源文件.cpp.头文件.h,我们还发现有以.i和.inl为扩展名的文件.其实,以.i和.inl为扩展名的文件是ACE源码中inline函数的存放形式. 在说明ACE中为什么采 ...

  7. JAVA——泛型类和泛型方法（静态方法泛型）

    泛型类定义的泛型,在整个类中有效.如果被方法是用,那么 泛型类的对象明确要操作的具体类型后,所有要操作的类型就已经固定了. 为了让不同的方法可以操作不同类型,而且类型还不确定.那么 可以将泛型定义在方 ...

  8. 【DB2】清理日志文件db2diag.log

    在数据库运行过程中,会产生很多的日志,进而使日志文件db2diag.log变大 当占用磁盘空间太大的时候,应该怎么处理呢? 方法一: db2inst1@Linux:/db2home/db2inst1/ ...

  9. P2093 零件分组【贪心算法练习题】

    题目链接: http://codevs.cn/problem/4888/ https://www.luogu.org/problem/show?pid=2093 题目描述 某工厂生产一批棍状零件,每个 ...

  10. H5商城，纯前端静态页面

    发布时间:2018-09-28   技术:jquery1.10.1+swipeSlide+jquery.mmenu+jquery.touchSwipe+cityinit   概述 纯手写H5商城,2年 ...