React Native packaging. jsx file

Source: Internet
Author: User
Tags sublime text

Recently in the study of react Native. The feeling of development efficiency is really good, but the JSX grammar is not very comfortable to write.

Tried the sublime Text 3 and visual Studio code to write codes, feeling the reaction is always slow a pat.

or want to change back VS2015 write jsx, but with vs write jsx seems to be only in the suffix of. jsx file inside write. (Do not know if the VS has directly set the method of writing jsx in JS)

Then turned over the react-native of the packaging process, changed to let the packaging program can automatically package. jsx file.

Paste the modified method, accustomed to vs can try to change the

1. Project Home folder \node_modules\react-native\packager\react-packager\src\server\index.js

Find "var watchrootconfigs = (dir = = {" This paragraph, plus '. Jsx ')

var watchrootconfigs = (dir = = {return {dir:dir,globs: [' **/*.js ', ' **/*.json ', ' **/*.jsx ',]. Concat (Assetglobs),};});

2. Project Home folder \node_modules\react-native\packager\react-packager\src\dependencyresolver\dependencygraph\index

Look for "this._crawling = Crawl (Allroots, {" Add paragraph, also add ' jsx '

This._crawling = Crawl (Allroots, {ignore:this._opts.ignorefilepath,exts: [' js ', ' jsx ', ' json '].concat (this._ opts.assetexts), Filewatcher:this._opts.filewatcher,});

3. Project Home folder \node_modules\react-native\packager\react-packager\src\dependencyresolver\dependencygraph\ Resolutionrequest.js
Find "if (this._fastfs.fileexists (Potentialmodulepath)) {" Change to

      let file; Let exts=["", This._platform? ('. ' + This._platform + '. js '): null, '. js ', '. json ', '. js '      X ']; for (let c=0;c<exts.length;c++) {if (Null!=exts[c] &&this._fastfs.fileexists (potentialmodulep      Ath + exts[c]) && (file = Potentialmodulepath + exts[c]) break; } if (!file) {throw new Unabletoresolveerror (Frommodule, Tomodule, ' file ${potentia      Lmodulepath} doesnt exist ',);      }//Below is the original code//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 ${potenti      Almodulepath} doesnt exist ',//); //}


Change to run react-native start to automatically package the suffix. jsx files.

React Native packaging. jsx file

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.