React Native 打包.jsx文件
最近在研究React Native。感觉开发效率确实不错,但jsx语法写起来感觉不怎么顺手。
试用了Sublime Text 3和Visual Studio Code写代码,感觉反应总是慢一拍。
还是想换回VS2015写jsx,但用VS写jsx好像只能在后缀为.jsx的文件里面写。(不知道VS有没有直接设置在js里写jsx的方法)
于是翻了下react-native的打包程序,改了下让打包程序能自动打包.jsx文件。
贴出修改方法,习惯能VS的可以试着改下
1.项目主文件夹\node_modules\react-native\packager\react-packager\src\Server\index.js
找"var watchRootConfigs = opts.projectRoots.map(dir => {"这段,加上'.jsx'
var watchRootConfigs = opts.projectRoots.map(dir => { return { dir: dir, globs: [ '**/*.js', '**/*.json', '**/*.jsx', ].concat(assetGlobs), }; });
2.项目主文件夹\node_modules\react-native\packager\react-packager\src\DependencyResolver\DependencyGraph\index
0.22版使用的是node-haste在\node_modules\react-native\node_modules\node-haste\lib\index
找"this._crawling = crawl(allRoots, {"加段,同样加上'jsx'
this._crawling = crawl(allRoots, { ignore: this._opts.ignoreFilePath, exts: ['js', 'jsx','json'].concat(this._opts.assetExts), fileWatcher: this._opts.fileWatcher, });
3.项目主文件夹\node_modules\react-native\packager\react-packager\src\DependencyResolver\DependencyGraph\ResolutionRequest.js
0.22版在\node_modules\react-native\node_modules\node-haste\lib\DependencyGraph
找"if (this._fastfs.fileExists(potentialModulePath)) {"改成
let file; let exts=["", this._platform?('.' + this._platform + '.js'):null, '.js', '.json', '.jsx']; for(let c=0;c<exts.length;c++){ if(null!=exts[c] &&this._fastfs.fileExists(potentialModulePath + exts[c]) &&(file = potentialModulePath + exts[c])) break; } if(!file){ throw new UnableToResolveError( fromModule, toModule, `File ${potentialModulePath} doesnt exist`, ); } //以下为原来的代码 //if (this._fastfs.fileExists(potentialModulePath)) { // file = potentialModulePath; //} else if (this._platform != null && // this._fastfs.fileExists(potentialModulePath + '.' + this._platform + '.js')) { // file = potentialModulePath + '.' + this._platform + '.js'; //} else if (this._fastfs.fileExists(potentialModulePath + '.js')) { // file = potentialModulePath + '.js'; //} else if (this._fastfs.fileExists(potentialModulePath + '.json')) { // file = potentialModulePath + '.json'; //} else { // throw new UnableToResolveError( // fromModule, // toModule, // `File ${potentialModulePath} doesnt exist`, // ); //}
改成后再运行 react-native start就可以自动打包后缀为.jsx的文件了。
React Native 打包.jsx文件的更多相关文章
- [RN] React Native 打包时 减少 Apk 的大小
React Native 打包时 减少 Apk 的大小 主要有两个方法: 在打包前设置 android\app\build.gradle 文件中 1) def enableProguardInRele ...
- React Native之APK文件签名及打包
生成apk签名文件 我们使用android studio的方式进行签名 AS工具栏找到并点击 build->gennrate signed apk 两种情况: 1.这里如果已经有签名文件了则直接 ...
- react native 之上传文件
最近遇到react native中需要上传一些图片到后台.期间,找了一些第三方上传插件,感觉不太好用,要么只支持一个平台,要么会对其他第三方造成影响,实在无奈.只能直接使用fetch上传.其中上传文件 ...
- react native 打包至iphone设备
1.新建bundle 在自己项目的ios文件夹下新建一个文件夹取名bundle PS:ios文件夹和node_modules文件夹在同一级目录下,这个bundle文件夹名称随意取,后面要用到,但是记得 ...
- React Native 打包 Apk
第一步:生成秘钥库 keytool -genkey -v -keystore opsmart-android-release-key.keystore -alias opsmart-android - ...
- react native 的js 文件从哪里获取
/** * Loading JavaScript code - uncomment the one you want. * * OPTION 1 * Load from development ser ...
- react native 打包上架
https://www.jianshu.com/p/ce71b4a8a246 react-native bundle --entry-file index.ios.js --platform ios ...
- react native 打包Ignoring return value of function declared with warn_unused_result attribute
从 github上下载 项目 用于学习查看别人的代码, 当执行完npm install 用xcode 打开 发现俩个错误提示Ignoring return value of function dec ...
- [React Native] 解析JSON文件
在编写代码时,开发者有时需要存储一些比较多,在应用程序运行时不需要更改的数据.文件大不便于写在代码中,可以把这些数据存储到JSON文件中. 优点非常明显: 1. 数据存放在单独的文件中,代码精简有条理 ...
随机推荐
- 理解 JavaScript 作用域和作用域链
http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html
- Android Studio -修改LogCat的颜色
Android Studio -修改LogCat的颜色 author:Kang,Leo weibo:http://weibo.com/kangyi 效果图 设置 Preference->Edit ...
- vim添加未识别文件类型
这里用.c的文件格式来识别.nc文件 $ cd ~/.vim/ftdetect $ vim nc.vim # nc.vim内容 # au BufRead,BufNewFilE *.nc set fil ...
- SwitchyOmega 在线调试
1,chrome 安装 Proxy SwitchyOmega 扩展程序 2,新建情景模式,输入模式名称"例如:new proxy1",选择"请选择情景模式的类型:代理服务 ...
- 虚拟centos7 用ssh登录
在虚拟机(Vmware Workstation)下,安装了CentOS7,现在想通过SSH工具连接虚拟机中的CentOS7 1. 首先,要确保CentOS7安装了 openssh-server,在 ...
- 关于《hibernate多对多》有中间表的建立
角色 与 菜单(资源)的多对多关系,在这里我们建立中间表,用两个oneToMany实现 实体类: 角色(GmRole) 菜单(GmMenu) 中间表(GmRoleRight) 1.在角色实体中 pa ...
- Asp.net的request类
ASP.NET获取客户端信息,暂时就这几个,有待添加~~ 1. 在ASP.NET中专用属性: 获取服务器电脑名:Page.Server.ManchineName 获取用户信息:Page.User 获取 ...
- 使用 Box2D 做一个 JansenWalker 机器人
在 Box2DFlash 的官网的首页有一个小 Demo,这个 Demo 中有11个例子,可以通过左右方向键查看不同的例子,里面的每个例子都非常有趣,但最让我感兴趣的,是其中一个叫 JansenWal ...
- 再战江湖。vuforia 初试
AR 里发现一个可用的项目 vuforia, 试着用用. 也是在很久不写博客后(以前全在百度博客上) 再次写
- USB通信协议——深入理解
USB通信协议——深入理解 0. 基本概念 一个[传输](控制.批量.中断.等时):由多个[事务]组成: 一个[事务](IN.OUT.SETUP):由一多个[Packet]组成. USB数据在[主机软 ...