最近在研究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的文件了。