React Native 如何運行打包.jsx文件

最近在學習RN,發現項目裏面的.jsx文件怎樣都無法引用,後來網上搜索了一下,發現RN無法運行.jsx文件。在網上搜索到一位大神的博客,描述瞭如何讓RN運行打包.jsx文件,copy一份作爲記錄,源博客鏈接:http://www.cnblogs.com/Grart/p/5033281.html

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`,
//  );
//}


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章