脚本宝典收集整理的这篇文章主要介绍了

Babel6:编译 React jsx + ES6 简单入门

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

简介

Babel 是一个广泛使用的转码器,可以将ES6代码转为ES5代码;并且还可以支持ReactJSX写法。


安装

请确定你已经安装好Nodejs
现阶段在npm上下载的都是6.0以上版本,它和5.0版本的变化还是很大的,这里我们用的是6.0的最新版

请先打开cmd/终端,全局安装 babel-cli (命令行转码)

npm install -g babel-cli

然后进入项目根目录,创建package.json

    npm init --yes

然后在项目本地安装

    npm install --save-dev babel-cli babel-core babel-preset-es2015 babel-preset-react

配置

在项目根目录下创建新文件“.babelrc”
该文件用来设置转码规则和插件,基本格式如下

{
  "presets": [],
  "plugins": []
}

presets字段设定转码规则。我们安装了babel-preset-es2015和babel-preset-react
前者是将ES6转换为ES5,后者是React的转码规则
将这2个规则写入“.babelrc”中

{
  "presets": [
    "es2015", "react"
  ],
  "plugins": []
}

编译

在根目录下创建2个文件夹。src是开发时文件的目录,lib是执行编译后输出文件的目录
├── lib
└── src

现在在src文件夹下创建一个test.js,这里用ES6来写React

class Test extends React.Component {
    render() {
        return (
            <h1>test</h1>
        );
    }
}
ReactDOM.render(<Test />, document.body);

这里在cmd/终端执行语句 “babel 输入目录 -d 输出目录”

babel src -d lib

执行成功后lib文件夹下就会多出一个test.js

var Test = function (_React$Component) {
    _inherits(Test, _React$Component);

    function Test() {
        _classCallCheck(this, Test);
        return _possibleConstructorReturn(this, (Test.__proto__ || Object.getPrototypeOf(Test)).apply(this, arguments));
    }
    
    _createClass(Test, [{
        key: "render",
        value: function render() {
            return React.createElement(
                "h1",
                null,
                "test"
            );
        }
    }]);
    
    return Test;
}(React.Component);

ReactDOM.render(React.createElement(Test, null), document.body);

改写package.json

package.json中改写scripts属性

"scripts": {
    "babel": "babel src -d lib"
}

这时在cmd/终端运行

npm run babel

执行成功会发现与执行babel src -d lib效果是一样的

总结

以上是脚本宝典为你收集整理的

Babel6:编译 React jsx + ES6 简单入门

全部内容,希望文章能够帮你解决

Babel6:编译 React jsx + ES6 简单入门

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过