溫故而知新 babel-cli 的相關使用
阿新 • • 發佈：2018-09-16
執行命令 參數 -- 編譯 image class dom ima product
# 在線編譯 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 的相關使用