jsxtransformer.js 和browser.min.jsjs有什么关系

jsxtransformer.js 和browser.js有什么关系_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
jsxtransformer.js 和browser.js有什么关系
我有更好的答案
为什么呢!&quot.jdbc.Driver的源代码看看;/ //Can&#39.DriverManager.DriverM)?打开/ static { try { java.getClassLoader().loadClass(&com.mysql.jdbc, / Register ourselves with the DriverManager /t register driver,就不行;); } } 原来.Driver&quot.sql.registerDriver(new Driver()); } catch (SQLException E) { throw new RuntimeException(&quot.mysql,Driver在static块中会注册自己到java.sqlgetClass()
为您推荐:
其他类似问题
换一换
回答问题,赢新手礼包没有录音文件
浏览器端JS异常监控
& 简介 前端技术
关键词 , &
第1页JS刘?杰第2页开发阶段做了“足够的”测试,&上线后还是在某些情况下出现错&误或异常,等发现的时候已经过&了很久。第3页QA汇报了错误,但是开发却很难&快速准确地定位到出现异常的源&码位置。第4页“万能的”window.onerror第5页于是捕获到了异常msg&Script&error.&file&“”&line&0&col&0&err&undefined第6页“Script&error.”的原因当HTML与script不同域时,浏览器为了防止泄漏敏感信息,&对异常内容和位置信息做了mute处理。&/2006/12/i-know-ifyoure-logged-in-anywhere.html第7页参考方案淘宝前端团队:JSTracker&http://taobaofed.org/blog//jstracker-howto-collect-data/&&腾讯imweb团队:badjs&/BetterJS/badjs-report&&其他&/cathsfz/p/how-to-capture-andanalyze-javascript-error.html&//javascripterror-monitor/第8页“解决”Script&error.&scriptcrossoriginsrc=“…”&&/script&&&Access-Control-Allow-Origin:页面域名第9页现实中的window.onerrorBrowser&Chrome≥&30&Firefox≥31&Safari≥10&…&baiduboxapp&Baidubrowser&BaiduHD&UC&…&IE&Edgecrossorigin&√&√&√msg&√&√&√url&√&√&√≈3/4√line&col&√√&√√&√√error&√&√&√≈1/4√&×第10页try&catch第11页异步第12页Error包含的信息Browser&IE≥10&Edge&IE≤9name&√&√message&√&√stack&√&×第13页IE≥10&Edge&输出如下ReferenceError:gisnotdefined&atf(…/f.js:3:3)&atGlobalcode(…/f.js:6:3)第14页Errorstackerror.name:error.message&atFunctionName(url:line:col)&atFunctionName(url:line:col)&...&&Errorstack没有被标准化,不同浏览器中格式会有&差异,最终上报前需要进?normalize处理。第15页Error没有&stack的浏览器&怎么办?第16页代码埋点第18页组装“stack”第20页构建过程与工具源码&babel+transformerplugin埋点后的代码&+&sourcemap/jacksky007/report-error第21页代码埋点的限制与不足1.&以function为单位的代码埋点,定位的?列信息与实际异常抛&出的准确位置稍有偏差2.&?件尺?增?,uglify&&&gzip&-6&后增?&5%&~&15%&3.&对Promise的异常处理?持不够完美第22页分浏览器加载&JSBrowserJSChrome≥&30&Firefox≥&31源JS&Safari≥&10baiduXXX&UC&IE&Edge&…埋点后的JS第23页定位异常在源码中的位置(一)f.js:6:3f.min.js:1:31f.min.map第24页定位异常在源码中的位置(二)f.re.map&f.re.js:13:5f.re.min.js:1:87第25页定位异常在源码中的位置(二)f.re.min.mapf.re.min.js:1:87第26页定位异常在源码中的位置(三)f.js:5:0第27页上报、存储Sentry&&Sentry的JSclient(raven.js)集成了TraceKit,&上报前会对Error进?normalize处理。第28页发布release&f.js&f.min.js&f.min.map&f.re.min.js&f.re.min.mapsentry第29页统计第30页检索&(Chrome)第31页检索&(IE&10)第32页检索&(IE&8)第33页拓展应用灰度发布与测试第34页已知问题与未来改进方向1.把&functiondeclaration包进&try…catch&中在不同浏览器或者不同版本之间可能产?不?&致?为。uglifyjs默认开启hoist_funs,可以&解决此问题,其它压缩?具需要注意。2.更进?步减??件尺?增?。&3.更精确的定位。&4.改进对Promise和async&await等的?持。&5.try…catch对性能的影响。第35页其他问题Tengine的combo功能,如何处理sourcemap?第36页相关链接window.onerror&https://html.spec.whatwg.org/multipage/&webappapis.html#errorevent&https://developer.mozilla.org/en-US/docs/Web/JavaScript/&Reference/Global_Objects/Error&crossorigin&https://trac.webkit.org/changeset/76429/trunk/Source/WebCore/&dom/ScriptExecutionContext.cpp&https://developer.mozilla.org/en-US/docs/Web/HTML/Element/&script#Browser_compatibility&https://bugs.chromium.org/p/chromium/issues/detail?id=159566&Error&https://developer.mozilla.org/en-US/docs/Web/JavaScript/&Reference/Global_Objects/Error&第37页联系方式微信:右??维码&&微博:下相楚狂客&&欢迎投简历给hax:&&&babeltransformerplugin&/jacksky007/report-error
沪ICP备号-4 & 2015
Email: dev(
提交建议 系统测试中,发现BUG或有任何建议请随时联系
支持文件格式:*.ppt, *.pptx, *.pdf;上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。相关文章推荐
在react 0.14前,浏览器端实现对jsx的编译依赖jsxtransformer.js
在react 0.14后,这个依赖的库改为browser.js
页面script标签的type也由text...
Cookie与 Session,一般认为是两个独立的东西,Session采用的是在服务器端保持状态的方案,而Cookie采用的是在客户端保持状态的方案。但为什么禁用Cookie就不能得到Session...
Cookie与 Session,一般认为是两个独立的东西,Session采用的是在服务器端保持状态的方案,而Cookie采用的是在客户端保持状态的方案。但为什么禁用Cookie就不能得到Session...
Cookie与 Session,一般认为是两个独立的东西,Session采用的是在服务器端保持状态的方案,而Cookie采用的是在客户端保持状态的方案。但为什么禁用Cookie就不能得到Session...
Cookie与 Session,一般认为是两个独立的东西,Session采用的是在服务器端保持状态的方案,而Cookie采用的是在客户端保持状态的方案。但为什么禁用Cookie就不能得到Session...
Cookie与 Session,一般认为是两个独立的东西,Session采用的是在服务器端保持状态的方案,而Cookie采用的是在客户端保持状态的方案。但为什么禁用Cookie就不能得到Session...
Cookie与 Session,一般认为是两个独立的东西,Session采用的是在服务器端保持状态的方案,而Cookie采用的是在客户端保持状态的方案。但为什么禁用Cookie就不能得到Session...
Cookie与 Session,一般认为是两个独立的东西,Session采用的是在服务器端保持状态的方案,而Cookie采用的是在客户端保持状态的方案。但为什么禁用Cookie就不能得到Session...
Cookie与 Session,一般认为是两个独立的东西,Session采用的是在服务器端保持状态的方案,而Cookie采用的是在客户端保持状态的方案。但为什么禁用Cookie就不能得到Session...
他的最新文章
他的热门文章
您举报文章:
举报原因:
原文地址:
原因补充:
(最多只允许输入30个字)react起步——jsx转换之路 - 简书
react起步——jsx转换之路
吐槽一下:学啥都是,真难,可能看一上午文章,还解决不了一个问题。万事开头难,不着急
使用npm获得react包
npm install --save react
npm install --save react-dom
上边这两个包,一个是react的核心包,一个是react提供的dom相关功能包。(我也是道听途说,在0.14以前,只有一个,后来分开成了两个。反正我用的时候,就是俩了。)
但是,仅仅这两个包,是完成不了一个react demo的。为什么?因为使用react难免用到它的jsx语法,而浏览器是不认识jsx的。上边的两个包,并没有提供jsx转换到js的功能。
如何转换jsx到js可能会看到很多情况,反正是把我弄蒙了,下面按照时间顺序一一说明
关于编码转化 ,可以发生在两个地方。
一、在服务器端,给转化好,然后送到浏览器
二、在浏览器端转换
jsxtransformer.js,react自带的,浏览器端的转换功能脚本。
react-tools,react自己提供的,服务器端
上边这俩,都比较早了,现在应该没人用了。
jsxtransformer.js就是在html页面通过script标签引入,然后,就可以在下边写react了。很明显,这是在浏览器端完成的转换。(注意此时react的type属性是"text/jsx")
&script src="./jsxtransformer.js"&
&script type="text/jsx"&
//注意,type属性
react-tools则是服务端的,通过类似如下完成转换
npm install -g react-tools
//全局安装react-tools
jsx --watch src/ bulid/
(具体是啥时候,我也不知道,从0.14以后?)
同样分为两种:
浏览器端:browser.js
服务器端:babel
因为过度和现在关系紧密,一并在后边说明
现在——抛弃浏览器端转换
在实际开发中,浏览器端转换性能问题严重,(毕竟多了一道工序),所以,浏览器端转换更多是用于平时的学习。(比如各种react教程,一些小demo)
babel是一个转码工具集,里边有各种各样的插件。
在babel6.0版本以前,其中的
babel-core //babel的api
插件提供浏览器端的转换器脚本,也就是browser.js,它替代了最早的jsxtransform.js(注意type属性"text/babel")
&script src="./babel-core/browser.js"&
&script type="text/babel"&
//注意,type属性
6.0之后,就没有了
依然使用babel
关于babel如何使用,在后边再做一个简单回顾。
6.0版本后,浏览器端的使用
browser.js
有时候我们只是想做一个测试demo,或者一个针对react的简单总结,直接上转换器脚本更方便一些,那么如何获取到browser.js呢?
npm install babel-core@5
//下载5.x版本的babel-core,就可以找到下图中的browser.js(好大,,,随便找个地方下一个,然后,把browser.min.js考过去)
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4765228-dcb3873b2cad6adb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
也可以像react官网那样,用cdn
&script src="/babel-core@5.8.38/browser.min.js"&&/script&
- babel-standalone
也可以使用它,这个插件用于非node环境下使用babel,源码来自
&script src="/ajax/libs/babel-standalone/6.4.4/babel.min.js"&&/script&
&script type="text/babel"&
// code es2015
简单回顾babel
创建.babelrc文件
"presets": [],
"plugins": []
安装规则集
npm install --save-dev babel-preset-es2015
//ES2015转码规则
npm install --save-dev babel-preset-react
//react转码规则
。。。。等等
然而,上是这样的
Paste_Image.png
将规则配置到.babelrc中
"presets": [
"plugins": []
安装babel-cli,babel-core,babel-register,babel-polyfill,babel-loader等插件
具体的与构建工具配合有时间再做整理
基本应用搭建方式 1. cnpm安装 国内使用 npm 速度很慢,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm: 2. 全局安装webpack 3. 项目示例 4. 拿到别人的项目之后 一般需要的依赖包有&console-polyfi...
无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到这篇好的文章:/p/42e11515c10f 写在前面的话阅读本文之前,先看下面这个webpack的配置文件,如果每...
前两部分我们已经完成了博客页面的展示和后台页面的展示: React技术栈+Express+Mongodb实现个人博客 -- Part 1 博客页面展示 React技术栈+Express+Mongodb实现个人博客 -- Part 2 后台管理页面 本篇文章主要介绍如何使用E...
从V1迁移到V2由于使用的是webpack版本是2.2.1,所以针对原文做了一些修改。针对webpack2的修改部分和添加的部分在最底部,文中已经改过来了。 写在前面的话阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限...
项目地址 从头开始建立一个React App - 项目基本配置 npm init 生成 package.json 文件. 安装各种需要的依赖: npm install --save react - 安装React. npm install --save react-dom ...
早上天还没亮我就起来收拾东西,今天要去桑耶寺。昨晚问了旅馆前台,但前台也不清楚要怎么坐车。我看了好多说法,比较可靠的一条说在早上七点前,大昭寺广场向西的宇拓路和朵什么路的交界处会有直接到桑耶寺的车,因为是当地人拜佛行程的车,所以,人满就发车了。我赶在七点前到了地方,本来想着...
宝宝生下来七天,因出生时有些症状,新生儿科直接入院了。为了避免大人探视带进细菌去,新生儿科不允许探视,除了孩子生下来入院的一次,我只在宝宝做b超时见又过一面。宝妈更惨,只在宝宝出来时见过一面。 宝妈出了院,回了家,安顿下。全家人都特别想孩子,宝妈尤甚,昨天就安排我来医院让宝...
俗话说“万丈高楼平地起”,护肤如果是一次漫长的盖楼,那么洗脸就是这栋大楼的地基,如果地基打不好,后续用再好的护肤品也只能是一座空中楼阁。鉴于洗脸在护肤中占有如此重要的战略性地位,今天,我们就来认真谈谈洗脸。 早前网上流传过这样一篇文章,大致内容是说一个外国女生,尝试半年时间...
安静到耳鸣的世界, 就此下了雨。
edit-line-reindent 代码重新排版 ctrl + ` 安装PackageControl输入 ctrl + shift + p 启动命令模式(PackageControl 的安装等)Package Control: Install Package 安装插件Pa...

我要回帖

更多关于 react jsxtransformer 的文章

 

随机推荐