# 在线编译

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. 1050: 贝贝的ISBN号码(isbn)

    #include <iostream> #include <iomanip> #include <cstdlib> #include <string> ...

  2. 转：nginx模块开发——handler（一）

    handler模块简介 相信大家在看了前一章的模块概述以后,都对nginx的模块有了一个基本的认识.基本上作为第三方开发者最可能开发的就是三种类型的模块,即handler,filter和load-ba ...

  3. Linux中wget用法

    Wget简介:Linux系统中wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,我们经常要下载一些软件或从远程服务器恢复备份到本地服务器.wget支持HTTP,HTTP ...

  4. SpringCloud服务消费者第一次调用出现超时问题的解决方案

    在第一次访问服务消费者的时候(消费者去调用服务提供者服务)会出现如下异常: com.netflix.hystrix.exception.HystrixRuntimeException: TestSer ...

  5. 6、java5线程池之固定大小线程池newFixedThreadPool

    JDK文档说明: 创建一个可重用固定线程数的线程池,以共享的无界队列方式来运行这些线程.在任意点,在大多数 nThreads 线程会处于处理任务的活动状态.如果在所有线程处于活动状态时提交附加任务,则 ...

  6. XPAGES 中CGI变量的获取

    In XPages, CGI variables are also available, but you need to write some code to get them via the JSF ...

  7. Oracle11gR2

    oracel目前企业用的最多的数据库,源码包值得下载 点击下载 安装引用: http://blog.csdn.net/cafardhaibin/article/details/25071249 htt ...

  8. openssh基于源码编译覆盖式安装

    覆盖式,就是卸载旧的openssh,打扫干净屋子再请客... 注意:请做做好测试工作 00.查看本机已安装的openssh rpm –qa |grep openssh rpm -e openssh-s ...

  9. 【phpstudy】安装Oracle 客户端 并连接

    参考连接:https://blog.csdn.net/liuquan007/article/details/77508518 phpstudy2016是32位版 phpstudy2014是64位版本[ ...

  10. java正则表达式去除html中所有的标签和特殊HTML字符（以&开头的）

    来源于:https://www.androiddev.net/java%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%8E%BB%E9%99%A4ht ...