reactJS - 03利用babel来”编译”我们的脚本文件

来源：互联网发布：黑色星期五淘宝打折么编辑：程序博客网时间：2024/05/22 05:08

第一步
在终端下进入项目根目录，执行 npm init，一路回车下去
然后发现项目目录下多了一个”package.json”文件

第二步
安装babel-cli

sudo npm install -g babel-cli

安装”编译”插件

sudo npm install babel-plugin-transform-react-jsx

完成上面，项目目录下会多如下目录和文件
这里写图片描述

第三步、执行编译
编译我们src目录下面的hello.js

babel --plugins transform-react-jsx src/hello.js --out-file build/hello.js

编译后的文件输出到build/hello.js

第四步、修改index.html

<!DOCTYPE html><html><head>    <title>初始</title>    <meta charset="utf-8">    <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="demo"></div>    <!-- 必须放在dom后面 -->    <!-- 注意type是text/javascript啦 -->        <!-- 引入我们编译好的js -->    <script type="text/javascript" src="build/hello.js"></script></body></html>

0 0