# 在线编译

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. 从MyEclipse到IntelliJ IDEA ——让你脱键盘，全键盘操作

    从MyEclipse到IntelliJ IDEA ——让你脱键盘,全键盘操作 从MyEclipse转战到IntelliJ IDEA的经历 我一个朋友写了一篇“从Eclipse到Android Stud ...

  2. 最好使的歌词编辑工具--Beslyric

      https://www.cnblogs.com/BensonLaur/p/6262565.html 感谢开发这么好的工具! 下载地址:http://beslyric.320.io/BesBlog/ ...

  3. Maven项目继承与聚合

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6628534.html  一:继承 在Java编程中,如果多个类都使用到了相同的内容.方法时,我们可以用继承的方 ...

  4. 背景图片自适应整个页面CSS+DIV

    <body style="overflow:hidden;"> <div class="wrapper"> <!--背景图片--& ...

  5. 索引唯一性扫描(INDEX UNIQUE SCAN)

           索引唯一性扫描(INDEX UNIQUE SCAN)是针对唯一性索引(UNIQUE INDEX)的扫描,它仅仅适用于where条件里是等值查询的目标SQL.因为扫描的对象是唯一性索引,所 ...

  6. 使用OpenSSL转换X509 PEM与PFX证书

    PKCS(Public Key Cryptography Standards) PKCS12:定义了包含私钥与公钥证书(public key certificate)的文件格式.私钥采密码(passw ...

  7. 基于py3和pymysql的数据库查询，查询某几列的数据

    #python3 #xiaodeng #基于py3和pymysql的数据库查询,查询某几列的数据 import pymysql conn=pymysql.connect(....) cur=conn. ...

  8. 【Dubbo实战】 Dubbo+Zookeeper+Spring整合应用篇-Dubbo基于Zookeeper实现分布式服务（转）

    Dubbo与Zookeeper.Spring整合使用 Dubbo采用全Spring配置方式,透明化接入应用,对应用没有任何API侵入,只需用Spring加载Dubbo的配置即可,Dubbo基于Spri ...

  9. C#让控制台程序不显示闪退窗口的方法

    新建一个控制台程序,然后编译为 窗体程序.即可........

  10. Git 经常使用命令合集

    ====== Git 经常使用命令合集 ====== === 1.Git 文档 ===     Git 中文文档观看地址:http://git.oschina.net/progit/      === ...