配置babel-cli
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了配置babel-cli相关的知识，希望对你有一定的参考价值。
参考技术A 局部配置1.新建一个文件夹package（名字可以随便起）
2、打开cmd命令窗口
3、cd：package的路径
npm init
4、需要用jquery，可以安装jquery
npm install --save-dev jquery
5、在cmd窗口输入：
安装babel-cli：
cnpm install --save-dev babel-cli
cnpm install babel-preset-env --save-dev
百度搜索babel进入官网
切换版本
2）
在package文件夹下：
6、在package文件夹下：
1）、 新建一个build文件夹里面存放转译后的js文件
2）、新建一个js文件存放es6语法的js文件
3）、在package.json里输入build: babel js -d build
4）、
新建文件.babelrc,在里面粘贴 "presets": ["env"]
7、cmd进入package文件夹下输入：
注：package.json文件：(以后参考版本用)
温故而知新 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的主要内容，如果未能解决你的问题，请参考以下文章