React学习--使用babel

来源：互联网发布：菊正宗化妆水知乎编辑：程序博客网时间：2024/05/23 01:26

搞了好久才弄明白 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>

0 0