javascript - 用es6语法编写react jsx,使用gulp-babel编译失败?
高洛峰
高洛峰 2017-04-10 17:52:23
[JavaScript讨论组]

jsx文件源码:

(function (window) {
    "use strict";
    class TestES6 extends React.Component {
        static defaultProps = {
            title: "hello"
        };

        render() {
            return 

hello

} } ReactDOM.render(, document.getElementById("testContaienr")); })(window);

gulp -v4.0.0-alpha.2:

  1. gulp-babel -v6.1.1

  2. babel-preset-react -v6.3.13

  3. 编译代码

    gulp.task('main:jsx', function () {
    return gulp.src(baseDir + '/components/*.jsx')
    .pipe(react({presets: ["react"]}))
    .pipe(gulp.dest(baseDir + '/scripts'));});

错误提示:

去除static部分代码,可以通过编译,编译出来的js文件源码:

(function (window) {
    "use strict";

    class TestES6 extends React.Component {
        render() {
            return React.createElement(
                "h3",
                null,
                "hello"
            );
        }
    }
    ReactDOM.render(React.createElement(TestES6, null), document.getElementById("testContaienr"));
})(window);

问题【微信中打开】:

  1. 在iphone(5s)上,可以显示"hello";

  2. 在android(华为荣耀6)上,不显示任何内容。

继续添加babel-preset-es2015 -v6.3.13

gulp编译代码修改为:(presets中添加es2015)

gulp.task('main:jsx', function () {
    return gulp.src(baseDir+'/components/*.jsx')
    .pipe(react({presets: ["react", "es2015"]}))
    .pipe(gulp.dest(baseDir + '/scripts'));
});

结果:
jsx文件中去除static部分代码:可以通过编译,iphone和android上均可以显示"hello";
jsx文件中添加static部分代码:无法通过编译

请问问题出在什么地方?是不支持static?谢谢各位

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(2)
ringa_lee

建议你用 webpack。trust me

迷茫

gulp.task("react",function(){

return gulp.src("../js/jsx/*.jsx")
    .pipe(react())
    .pipe(babel({presets:[es2015]}))
    .pipe(gulp.dest("../js"))
    .pipe(notify({title:"React JSX to js and minify",message:"JSX task complete."}));

});

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号