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

发布时间：2020-12-15 20:23:21 所属栏目：百科来源：网络整理

导读：# 在线编译 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 ? 由于官方一直在变动pa

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!