# 在线编译 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