javascript - gulp-react将jsx转化为js代码,执行报错,求解
PHP中文网
PHP中文网 2017-04-11 13:19:37
[JavaScript讨论组]

刚刚接触react,查到gulp-react可以将jsx转为js来执行,所以利用gulp-react将jsx转为js;
而react运行所依赖的库有如下,其中browser.js是负责把jsx转为js,所以在我把browser.js注释调为什么就报错呢?
jsx代码如下,是个demos:

.babelrc如下:

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

gulpfile.js如下:

gulp.task('babel',()=>{
return gulp.src('zouxiu/js/es6.jsx')
        .pipe(babel())
        // .pipe(react())
        .pipe(rename('router.js'))
        .pipe(gulp.dest('zouxiu/js/build/'));
});

转化之后,index.html引用如下:

我将原先的babel改成了javascript(因为我想既然已经利用gulp-react转化了就不需要babel了吧,这里我没有更改掉babel,browser.js是注释的,既然浏览器都不加载router.js)而且还把browser.js也注释掉了;
然后浏览器就报错了:


(也不知道是哪里理解错了)
新手,顺便问下大家:babel-preset-react、babel-preset-es2015这些插件又是做什么用的?

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(1)
PHP中文网
  1. 建议把代码贴上来看看,才好发现问题在哪里

  2. babel-preset-reactbabel-preset-es2015可以当成是 babel编译功能的插件补充。本来 babel 只是一个把 es6 代码编译成 es5 代码的工具,但是 es 标准发展的很快,很多新的特性被提出来,但是在浏览器上并未实现(甚至可能永远也不会被实现),比如 async, await这种;但是开发者又很希望能在实际代码编写中使用这些特性,所以就有了这样的插件出现。这些插件可以说是 babel 在整体代码结构上做出的选择吧,具体的插件列表可以这里:http://babeljs.io/docs/plugins/。
    感觉说得不是很清楚...如果想了解更具体的内容,建议还是看 babel 官网吧

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

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