您的位置：首页 > Web前端 > React

React学习--使用babel

2015-11-12 17:05 405 查看

搞了好久才弄明白 babel webpack 都是干嘛用的.
babel是一个源码对源码的编译工具,主要是用于将es6翻译成es5.
(由于现在浏览器还没有支持es6,若想用es6开发,只能将它翻译成浏览器都能解释的es5才能正常使用)
哦,对了,还要啰嗦一句,我为什么要用babel
在看React官网的时候,它的示例代码(如下图)中引用了一个国外的js文件,
每次访问都会很慢;后来经过了解才知道,它的作用和babel是一样的.so~

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<!--就是这个东西⬇️⬇️⬇️⬇️-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>

进入正题

首先需要安装一些环境

  • node
    环境 (这个就不多做介绍了 自行搜索下载)
  • 安装好node之后就可以用
    npm
    安装
    babel
    及
    babel-preset-react
    (babel的react插件)
npm install babel-cli -g  //babel-cli是babel得命令行工具 -g将它安装为全局指令
npm install babel-preset-react
  • 由于是练习用的,就不写配置文件了,可以直接在命令行运行
babel --presets react script/ --out-dir src/  //将srcipt目录中的所有文件输出到src目录中
//如果只是输出文件 可以直接这样写
babel --presets react main.js bundle.js

引用的时候一定要注意,script标签中的type类型一定不能在使用babel类型,我就是忘了去掉type类型,结果输出的文件引用进来之后不报错也不出东西,
搞了好久才发现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<!--就是这个东西就可以去掉了-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>-->
</head>
<body>
<div id="example"></div>
<!--记得引用翻译后的es5文件,决定不能用babel类型-->
<!--<script type="text/babel" src="bundle.js"></script>-->
<script src="bundle.js"></script>
</body>
</html>
阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航