# 在线编译

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. 通过jdbc获取数据库中的表结构 主键 各个表字段类型及应用生成实体类

    http://www.cnblogs.com/lbangel/p/3487796.html 1.JDBC中通过MetaData来获取具体的表的相关信息.可以查询数据库中的有哪些表,表有哪些字段,字段的 ...

  2. 如何根据搜索页面内容得到的结果生成该元素的xpath路径

    如何根据搜索页面内容得到的结果生成该元素的xpath路径?

  3. Eclipse Java注释模板设置详解以及版权声明

    网上的Eclipse注释模板,在这里稍稍整理一些比较常用的. 编辑注释模板的方法:Window->Preference->Java->Code Style->Code Temp ...

  4. at java.lang.AbstractStringBuilder.toString

    04-18 14:40:12.615 1210-1210/com.tongyan.lanzhou.rv I/dalvikvm: "main" prio=5 tid=1 RUNNAB ...

  5. 3299 有序数组合并求第K大问题

    题目描述 Description 给出两个有序数组A和B(从小到大有序),合并两个有序数组后新数组c也有序,询问c数组中第k大的数 假设不计入输入输出复杂度,你能否给出一个O(logN)的方法? 输入 ...

  6. Linux中的共享链接库shared libraries

    可执行文件的静态链接和动态链接静态链接会将需要的库函数在编译时一并包含, 所以体积会比较大. 使用ldd命令查看可执行文件链接的库 $ ldd /sbin/ldconfig not a dynamic ...

  7. 删除草稿信息之后 threads表的数据没有发生变化

    现象描述: 无论是用_id来删除草稿信息,还是用thread_id和type来删除草稿,草稿都可以删除掉,但是threads表中的数据都没有发生变化. private void removeDraft ...

  8. Ios中checkBox

    //使用tableview来进行布局checkBox.便于全选,全不选//radiobutton 适合用RadioButton #import <UIKit/UIKit.h> @inter ...

  9. ios中core Plot (2)

    #import "ViewController.h" @interface ViewController () //指定要画得view @property(nonatomic,as ...

  10. ios中常用的方法

    图片分类 @implementation UIImageView (ext) +(UIImageView*)imageViewWith:(UIImage*)img imgFrame:(CGRect)_ ...