React Native手动打包生成index.bundle.js文件
来源:互联网 发布:虚拟化软件esxi 编辑:程序博客网 时间:2024/06/14 08:48
github地址: https://github.com/succeed2011/react-native-document-note
React Native版本0.51.0
一般情况下我们是不需要手动对RN的js代码进行打包生成index.bundle.js文件的,或者我们可以在调试模式下使用浏览器手动复制代码保存,但是有些情况我们是需要使用程序帮我们自动完成打包操作的。
为此我写了一个脚本文件。使用步骤为:
- 新建package.js文件,将文件放在
./node_modules/react-native
目录内; - 在项目根目录上执行
node ./node_modules/react-native/package.js
; - 打包后的js文件保存在项目根目录,后缀为
.bundle.js
.
注: * 入口文件放在项目根目录中* package.js中reqUrlArr变量中写的是入口js文件,可以写多个,比如入口文件为index1.js、index2.js,那么 reqUrlArr = ['index1.bundle', 'index2.bundle']
'use strict';require('./local-cli/cli.js');const log = require('./local-cli/util/log').out('bundle');const Server = require('metro-bundler/src/Server');const Terminal = require('metro-bundler/src/lib/Terminal');const TerminalReporter = require('metro-bundler/src/lib/TerminalReporter');const TransformCaching = require('metro-bundler/src/lib/TransformCaching');const outputBundle = require('metro-bundler/src/shared/output/bundle');//const saveAssets = require('./local-cli/saveAssets');const defaultAssetExts = require('metro-bundler/src/defaults').assetExts;const defaultSourceExts = require('metro-bundler/src/defaults').sourceExts;const defaultPlatforms = require('metro-bundler/src/defaults').platforms;const defaultProvidesModuleNodeModules = require('metro-bundler/src/defaults').providesModuleNodeModules;const {ASSET_REGISTRY_PATH} = require('./local-cli/core/Constants');const path = require('path');const fs = require('fs');const terminal = new Terminal(process.stdout);//需要打包的文件,项目根目录的文件const reqUrlArr = ['index.bundle'];//项目跟路径const projectRoots = path.resolve(__dirname.slice(0,__dirname.indexOf('node_modules')));const createServerOpts = { assetExts: defaultAssetExts, assetRegistryPath: ASSET_REGISTRY_PATH, blacklistRE: /(node_modules[\/\\]react[\/\\]dist[\/\\].*|website\/node_modules\/.*|heapCapture\/bundle\.js|.*\/__tests__\/.*)$/, cacheVersion: '3', enableBabelRCLookup: false, extraNodeModules: {}, getPolyfills: require('./rn-get-polyfills'), //getTransformOptions: [Function: getTransformOptions], globalTransformCache: null, hasteImpl: undefined, maxWorkers: 3, moduleFormat: 'haste', platforms: [ 'ios', 'android', 'windows', 'web' ], polyfillModuleNames: [], //postProcessModules: [Function: postProcessModules], //postMinifyProcess: [Function: postMinifyProcess], //postProcessBundleSourcemap: [Function: postProcessBundleSourcemap], projectRoots: [projectRoots], providesModuleNodeModules: [ 'react-native', 'react-native-windows' ], reporter: new TerminalReporter(terminal), resetCache: false, runBeforeMainModule: [path.join(projectRoots, 'node_modules/react-native/Libraries/Core/InitializeCore.js')], silent: false, sourceExts: ['js', 'json'], transformCache: TransformCaching.useTempDir(), transformModulePath: path.join(projectRoots, 'node_modules/metro-bundler/src/transformer.js'), useDeltaBundler: false, watch: false, workerPath: null}const server = new Server(createServerOpts);var count = 0;console.log('开始处理... ...');reqUrlArr.forEach(function(reqUrl) { //platform决定是哪个平台,因为有些控件在不同平台加载的代码不一样 server.buildBundleFromUrl(reqUrl + '?platform=ios').then(function(p) { const code = p.getSource({ inlineSourceMap: true, minify: false, }); const bundlePath = path.resolve(path.dirname(__filename), '../../' + reqUrl + '.bundle.js'); fs.writeFileSync(bundlePath, code); console.log('写入文件:' + bundlePath + '成功!') if(++count === reqUrlArr.length) { console.log('打包完毕!!!'); process.exit(0); } });})
阅读全文
0 0
- React Native手动打包生成index.bundle.js文件
- react-native不能生成index.android.bundle
- react native gradle assembleRelease打包运行失败,没有生成bundle文件
- React Native 打包生成apk文件
- React Native 项目结构、剖析index.ios.js文件
- react-native:unable to download js bundle
- webpack打包生成的bundle.js文件过大的问题
- React-Native 之index.ios.js解读
- React Native bundle 打包、拆包工具之moles-packer
- React Native打包代码解析与拆分Bundle做法
- React-Native修改index.android.js文件后,Genymotion程序不更新问题
- react native Unable to download JS bundle 的解决方案
- React+Native Unable to download JS Bundle解决办法
- React Native 如何运行打包.jsx文件
- react-native 打包android apk文件
- 《React-Native系列》7、bundle文件的加载和维护
- 《React-Native系列》40、 ReactNative之bundle文件瘦身
- 《React-Native系列》39、 ReactNative之bundle文件瘦身
- 毕设-使用持久层框架Mybatis
- 学习12
- java eclipse调试提示Source not found 或 一闪而过 解决方法
- 20171222Capstone训练营
- 解决Url带中文参数乱码问题
- React Native手动打包生成index.bundle.js文件
- bootstrap笔记
- Java UDP网络编程
- LeetCode 257. Binary Tree Paths
- Mysql 清空表数据,并且主键回到 1
- 直接寻址书写格式
- HTML CSS 使文本框选中后发光
- mysql的全文检索的方法
- Golang 系统调用Syscall