# 在线编译

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. Spring-boot logback日志处理

    1:在resources目录下面创建logback.xml配置文件 <?xml version="1.0"?> <configuration> <!- ...

  2. MapReduce三种路径输入

    目前为止知道MapReduce有三种路径输入方式.1.第一种是通过一下方式输入: FileInputFormat.addInputPath(job, new Path(args[0]));FileIn ...

  3. Android 建立手机与手表数据同步机制总结

    Android Wear 数据同步机制总结 当手机与手表建立蓝牙连接之后.数据就能够通过Google Play Service进行传输. 同步数据对象Data Item DataItem提供手机与手表 ...

  4. linux下编译Zero C ICE

    0.简介 ZeroC ICE 是指ZeroC公司(www.zeroc.com)的ICE(Internet Communications Engine)中间件平台. 目前ICE平台中包括Ice,Ice- ...

  5. 输出前 k 大的数

    总时间限制: 10000ms 单个测试点时间限制: 1000ms 内存限制: 65536kB 描述 给定一个数组,统计前k大的数并且把这k个数从大到小输出. 输入 第一行包含一个整数n,表示数组的大小 ...

  6. VS2010 lib和dll导出路径设置

    创建库文件工程时往往需要设置.lib文件和.dll文件的路径. 假设一个solution对应了多个工程,然而他们共用一些库,就可以在solution文件夹下分别添加两个文件夹lib和bin(其实放在一 ...

  7. centos中执行apt-get命令提示apt-get command not found

    先说结论: 在centos下用yum install xxx yum和apt-get的区别: 一般来说著名的linux系统基本上分两大类:  RedHat系列:Redhat.Centos.Fedora ...

  8. WKWebView 使用及注意事项

    iOS8之后,苹果推出了WebKit这个框架,用来替换原有的UIWebView,新的控件优点多多.由于一直在适配iOS7,就没有去替换,现在仍掉了iOS7,以为很简单的就替换过来了,然而在替换的过程中 ...

  9. 上海租房找房建议及条件，上海IT行业开发常见公司的位置地点

    上海租房,找房条件 以2号地铁线为中心,优先选择(回家方便,重点!),交通设施较集中地铁:2,3,4 区:普陀区,静安区,长宁区,闸北区,浦东新区,闵行区,徐汇区 路:镇坪路,威宁路,娄山关路,中山公 ...

  10. rviz学习笔记（一）——Markers: Sending Basic Shapes (C++) 发送基础形状

    一.创建一个包——进行marker练习 1.创建ROS工作空间和包 mkdir -p ~/catkin_ws/src #创建工作空间目录 #创建ROS数据包 catkin_create_pkg usi ...