温故而知新 babel-cli 的相关使用

Posted 2021-01-06 cylee

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了温故而知新 babel-cli 的相关使用相关的知识，希望对你有一定的参考价值。

# 在线编译
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 的相关使用的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 babel

自己定义View时，用到Paint Canvas的一些温故，简单的帧动画（动画一，"掏粪男孩Gif"顺便再提提onWindowFocusChanged）(代码片段

js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件

你如何更新 Babel-CLI 中的依赖项？

Babel-CLI 正确设置配置值

温故而知新，感想