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

找"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
找"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的文件了。

时间: 2024-10-13 14:47:32

React Native 打包.jsx文件的相关文章

[RN] React Native 打包时 减少 Apk 的大小

React Native 打包时 减少 Apk 的大小 主要有两个方法: 在打包前设置 android\app\build.gradle 文件中 1) def enableProguardInReleaseBuilds = true 经测试,大概能减少 1M 之内的大小 2) def enableSeparateBuildPerCPUArchitecture = true 这个测试后就牛了,打包后的文件为大概 7~8M左右 不过需要注意的是,这里会分成多个平台 命名来分别拆分输出 就是了! 但挺

react native不能打包jsx文件

1. 这个问题我还是没有解决参考了 https://blog.csdn.net/cy22201222/article/details/77877244这篇博文 ,但是开发目录结构已经变了,packager目录根本没有,哪位兄弟解决了,给我个提示,先谢过了 2. 为了不耽误项目进度 , 嘿嘿,只能将jsx文件修改成js文件,反正不影响,??(我不服气,不服气,气) 原文地址:https://www.cnblogs.com/tengyuxin/p/11595924.html

react native 的js 文件从哪里获取

/** * Loading JavaScript code - uncomment the one you want. * * OPTION 1 * Load from development server. Start the server from the repository root: * * $ npm start * * To run on device, change `localhost` to the IP address of your computer * (you can

React Native实践之携程Moles框架

编者:本文来自携程框架研发部高级经理魏晓军在第二期[携程技术微分享]上的分享,以下为整理后的文字实录.视频回放可点击这里.关注携程技术中心微信公号ctriptech,可获知更多微分享课程信息. 因为支持用javascript开发原生应用,React Native一推出就受到不少公司热捧,各家都跃跃欲试.但有一个痛点是,在移动端,我们是否有必要开发多套程序:iOS.Android和H5?本次将通过对Moles框架的分享,介绍携程在React Native方面的实战干货,希望给大家一些灵感和启发.

React Native:使用 JavaScript 构建原生应用 详细剖析

数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生的 iOS 应用——就在今天,Beta 版的仓库释出了! 基于 PhoneGap 使用 JavaScript 和 HTML5 开发 iOS 应用已经有好几年了,那 React Native 有什么牛的? React Native 真的很牛,让大家兴奋异常的主要原因有两点: 可以基于 React Native使用 JavaScript 编写应用逻辑,UI 则可以保持全是

React Native移植iOS原生项目

手工集成React Native 第一步:初始化React Native环境 在我们要集成的项目中,进入到*.xcodeproj文件的上级目录,运行React Native初始化命令react-native init [Project Name]会出现prompt, 输入yes,这样会在ios目录下生成一个同名工程.init过程会需要一点时间,耐心等待. 完成后项目文件目录会变成这样: node_modules:react native依赖包 ios:iOS项目相关代码,Xcode工程文件 an

React Native Bundle 拆包工具之 moles-packer 介绍

moles-packer moles-packer 是由携程框架团队研发的,与携程moles框架配套使用的React Native 打包和拆包工具,同时支持原生的 React Native 项目. github地址 npm地址 安装 #从npm仓库中安装. npm install -g moles-packer 获取帮助信息 moles-packer --help 使用 #在React Native项目根目录下执行命令 moles-packer --input /path/to/project

react native ios 上架

1.申请开发者账号,去苹果开发者中心申请 2.applicationloader 集申请证书.真机调试.发布于一身,避免繁琐的官网申请过程 http://www.applicationloader.net/blog/zh/72.html 3.详细的发布过程 https://jingyan.baidu.com/article/7082dc1c21bba7e40a89bd1d.html 4.xcode配置证书 https://blog.csdn.net/wyz670083956/article/de

【React Native开发】React Native进行签名打包成Apk

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50525976 本文出自:[江清清的博客] (一)前言 [好消息]个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org 前几节课程我们对于React Native的一些基础配置,开发工具以及调试,Android项目移植做了相关讲解,今天一起来学习一下另外一个比较重要的知识点,就是React Nativ