React Native手動打包生成index.bundle.js文件

github地址: https://github.com/succeed2011/react-native-document-note

React Native版本0.51.0

一般情況下我們是不需要手動對RN的js代碼進行打包生成index.bundle.js文件的，或者我們可以在調試模式下使用瀏覽器手動複製代碼保存，但是有些情況我們是需要使用程序幫我們自動完成打包操作的。

爲此我寫了一個腳本文件。使用步驟爲：

1. 新建package.js文件，將文件放在./node_modules/react-native目錄內；
2. 在項目根目錄上執行 node ./node_modules/react-native/package.js;
3. 打包後的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);
        }
    });
})