javascript - 用es6语法编写react jsx,使用gulp-babel编译失败?
高洛峰
高洛峰 2017-04-10 17:52:23
0
5
744

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教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

reply all (5)
左手右手慢动作

建议你用 webpack。trust me

    Peter_Zhu

    es6没你这样的写法。。。
    https://segmentfault.com/a/1190000003097911#articleHeader4

      小葫芦

      在react官网看到一段,应该是写错了,很感谢 @radius 和 @杨川宝

        阿神

        一直在犹豫这个问题要不要继续回答。毕竟已经标记解决了, 回答了也不会被采纳。 如果不回答的话,题主甚至包括回答的人都没有说明这个问题是怎么解决的……

        不管怎样还是回答吧,这个问题的关键不在于 webpack,而是babel。你代码中用到了static关键字,如果你只开始babel的es2015语法是不支持这个属性的,需要你额外下载一个插件:

        http://babeljs.io/docs/plugins/transform-class-properties/

        如果题主想了解更多可以参考这里:

        https://github.com/jeffmo/es-class-fields-and-static-properties#part-2-class-static-properties

          迷茫

          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."}));

          });

            Latest Downloads
            More>
            Web Effects
            Website Source Code
            Website Materials
            Front End Template
            About us Disclaimer Sitemap
            php.cn:Public welfare online PHP training,Help PHP learners grow quickly!