metro-bundler react-native专用的打包工具
github地址
react-native的模块系统遵循的是AMD模式,打包后会把AMD模块代码一起打包进去，在metro-bundler/src/defaults.js中
exports.moduleSystem = require.resolve('./Resolver/polyfills/require.js');
所以可以通过修改这个指定自己的AMD加载模块。
在自定义的cli.js中，修改成自定义的require.js
require("metro-bundler/src/defaults").moduleSystem=require.resolve("./require.js");
require加载流程
首先注册了require和__d成全局方法,以及modules对象用来缓存模块
global.require = require;
global.__d = define;
const modules = Object.create(null);
//加入这段 方便以后动态获取或者修改已经加载好的模块
global.__modules=modules;
1）define方法
- factory参数 是工厂类，用来构造对象
- moduleId参数 是模块的Id
function define(
factory,
moduleId)
{
if (moduleId in modules) {
// prevent repeated calls to `global.nativeRequire` to overwrite modules
// that are already loaded
return;
}
modules[moduleId] = {
dependencyMap,
exports: undefined,
factory,
hasError: false,
isInitialized: false };
}
2) require方法
只有一个moduleId参数，如果module存在且已经初始化 直接返回module的exports对象，如果没有则调用
guardedLoadModule 去初始化module。
function require(moduleId) {
//$FlowFixMe: at this point we know that moduleId is a number
const moduleIdReallyIsNumber = moduleId;
const module = modules[moduleIdReallyIsNumber];
return module && module.isInitialized ? module.exports : guardedLoadModule(moduleIdReallyIsNumber, module);
}
reactNative处于调试下，global对象会有ErrorUtils对象，用于展示错误，发布模式则没有。实际调用了loadModuleImplementation方法去实现模块加载。
let inGuard = false;
function guardedLoadModule(moduleId, module) {
if (!inGuard && global.ErrorUtils) {
inGuard = true;
let returnValue;
try {
returnValue = global.loadModuleImplementation(moduleId, module);
} catch (e) {
global.ErrorUtils.reportFatalError(e);
}
inGuard = false;
return returnValue;
} else {
return global.loadModuleImplementation(moduleId, module);
}
}
如果module不存在 就表示define方法没有被调用，这样可以通过nativeRequire去加载模块的js文件，nativeRequire方法是c++实现的，只会加载assets/js-modules下的js文件。我们只要实现类似的c++方法就可以加载任意目录的js文件，并且可以加密和解密。
nativeRequire调用过后。模块就会在modules对象中存在，调用module的factory，传入参数global, require, moduleObject, exports, dependencyMap,这里的参数与node类似，之后返回exports对象。
const ID_MASK_SHIFT = 16;
const LOCAL_ID_MASK = ~0 >>> ID_MASK_SHIFT;
global.loadModuleImplementation = function (moduleId, module) {
const nativeRequire = global.nativeRequire;
if (!module && nativeRequire) {
if (isNaN(moduleId)) {
nativeRequire(moduleId);
} else {
const bundleId = moduleId >>> ID_MASK_SHIFT;
const localId = moduleId & LOCAL_ID_MASK;
nativeRequire(localId, bundleId);
}
module = modules[moduleId];
}
if (!module) {
throw unknownModuleError(moduleId);
}
if (module.hasError) {
throw moduleThrewError(moduleId, module.error);
}
// We must optimistically mark module as initialized before running the
// factory to keep any require cycles inside the factory from causing an
// infinite require loop.
module.isInitialized = true;
const exports = module.exports = {};
var _module =
module;
const factory = _module.factory, dependencyMap = _module.dependencyMap;
try {
const moduleObject = {exports};
// keep args in sync with with defineModuleCode in
// metro-bundler/src/Resolver/index.js
// and metro-bundler/src/ModuleGraph/worker.js
factory(global, require, moduleObject, exports, dependencyMap);
// avoid removing factory in DEV mode as it breaks HMR
if (!__DEV__) {
// $FlowFixMe: This is only sound because we never access `factory` again
module.factory = undefined;
module.dependencyMap = undefined;
}
return module.exports = moduleObject.exports;
} catch (e) {
module.hasError = true;
module.error = e;
module.isInitialized = false;
module.exports = undefined;
throw e;
}
}
更改react-native的C++代码
在react-native/ReactCommon/cxxreact下JSCExcutor.cpp文件中
这个方法是在JS启动的时候会被调用，里面定义了一些全局方法，这里加入了evalFile方法
void JSCExecutor::initOnJSVMThread() throw(JSException) {
····
installNativeHook<&JSCExecutor::nativeFlushQueueImmediate>("nativeFlushQueueImmediate");
installNativeHook<&JSCExecutor::nativeCallSyncHook>("nativeCallSyncHook");
installNativeHook<&JSCExecutor::evalFile>("evalFile");
installGlobalFunction(m_context, "nativeLoggingHook", JSCNativeHooks::loggingHook);
installGlobalFunction(m_context, "nativePerformanceNow", JSCNativeHooks::nowHook);
····
}
c++实现的js方法 有两个参数，第一个参数argumentCount表示参数个数,arguments[]对应传入的参数，
这里先判断了参数必须是一个且是字符串，否则抛出异常，然后检查第一个参数对应的文件是否存在，之后读取文件，然后调用evaluateScript执行文件，达到执行任意js文件的目的。
JSValueRef JSCExecutor::evalFile(size_t argumentCount,const JSValueRef arguments[]) {
if (argumentCount < 1 ) {
throw std::invalid_argument("Got wrong number of args");
}
Value value=Value(m_context, arguments[0]);
if(!value.isString()){
throw std::invalid_argument("Got wrong args[0] type");
}
FILE* fp=fopen(value.toString().str().c_str(),"rb");
if(fp==NULL){
throw std::invalid_argument(folly::to<std::string>("file not exists,path is ",value.toString().str()));
}
fseek(fp, 0, SEEK_END);
int dwSize=ftell(fp);
char* pBytes = new char[dwSize];
fseek(fp, 0, SEEK_SET);
fread(pBytes, dwSize, 1, fp);
fclose(fp);
evaluateScript(m_context,String(m_context,(char*)pBytes),value.toString());
delete pBytes;
return Value::makeUndefined(m_context);
}
接下来就是需要通过java传入js文件的初始目录，通过ReactContextBaseJavaModule的getConstants方法，可以把初始目录的字符串传递到js中。
public class NativeUtil extends ReactContextBaseJavaModule {
private static final String LOCAL_PATH = "LOCAL_PATH";
@Nullable
@Override
public Map<String, Object> getConstants() {
final Map<String, Object> constants = new HashMap<>();
constants.put(LOCAL_PATH, getCurrentActivity().getFilesDir().getAbsolutePath());
return constants;
}
}
js中修改global.loadModuleImplementation ，这样就改变了require流程，如果模块不存在，会去指定目录加载对应{moduleId}.js文件
global._BASE_PATH=NativeUtil.LOCAL_PATH+"/pack/js-modules";
const old=global.loadModuleImplementation;
global.loadModuleImplementation=function(moduleId, module){
if (!module && evalFile) {
evalFile(global._BASE_PATH+"/"+moduleId+".js");
module = global.__modules[moduleId];
}
return old(moduleId, module)
}
打包流程
unbundle命令会将入口js文件依赖的所有js打包到--bundle-output对应目录下，每个模块会被分配一个id，且放到--bundle-output的js-modules文件夹下
node cli.js unbundle --entry-file index.android.js --platform android --dev false --bundle-output build/main.bundle --assets-dest build
每个模块的id是根据metro-bundler/src/lib/createModuleIdFactory.js生成的，修改这个文件就可以生成指定id,在cli.js下增加如下代码 改变moduleId生成的逻辑。
require("metro-bundler/src/lib/createModuleIdFactory.js");
ModuleCache[require.resolve("metro-bundler/src/lib/createModuleIdFactory.js")].exports=require("./createModuleIdFactory");
将src下的业务js的id从10000开始，而其他模块的id从0递增开始，这样就很容易将业务模块和固定模块进行拆分。
module.exports = function(){
const fileToIdMap = new Map();
let nextId = 0;
let busId=0;
return (_ref) => {
let modulePath = _ref.path;
// modulePath=modulePath.replace(basePath,"").replace(/\\|-/g,"_").replace(/\.js$/,"");
modulePath=modulePath.replace(basePath,"");
if(!modulePath.startsWith("src")){
if (!fileToIdMap.has(modulePath)) {
fileToIdMap.set(modulePath, nextId);
nextId += 1;
}
return fileToIdMap.get(modulePath);
}else{
if (!fileToIdMap.has(modulePath)) {
fileToIdMap.set(modulePath, 10000+busId);
busId += 1;
}
return fileToIdMap.get(modulePath);
}
};
};
文件加密以及解密
由于拆分 导致js很容易被分析识别所以需要加密存储。又由于是打包用的js,所以需要用js加密然后用c++解密。这里提供了利用了异或达到目的。
js加密流程
let fs = require("fs");
const { Transform } = require('stream');
class EncodeTrans extends Transform {
constructor(options={}) {
super(options);
this.code1=Buffer.from(options.key1||'fstat on bundle failed.', 'utf8');
this.code2 = Buffer.from(options.key2||"nativeRequire", "utf8")
this.code1Index = 0
this.code2Index = 0
}
_transform(buf, enc, next) {
let start=0;
while (start < buf.length) {
const uint = buf.readUInt8(start);
const key1 = this.code1.readUInt8(this.code1Index++);
const key2 = this.code2.readUInt8(this.code2Index++);
(this.code1Index >= this.code1.length)&&(this.code1Index=0);
(this.code2Index >= this.code2.length)&&(this.code2Index=0);
buf.writeUInt8(uint ^ key1 ^ key2,start);
start++;
}
next(null, buf);
}
}
fs.createReadStream("build/js-modules/10.js")
.pipe(new EncodeTrans())
.pipe(fs.createWriteStream("10.js"));
c++ 解密流程
char* decodeByPass(const char* code1, const char* code2, byte* content, int contentLength) {
byte* p = content;
char* c = new char[contentLength+1];
int code1Len = strnlen(code1,1000);
int code2Len = strnlen(code2,1000);
int code1Index = 0;
int code2Index = 0;
char* startC = c;
while (p- content<contentLength) {
*startC = (*p^code2[code2Index++]^code1[code1Index++]);
startC++;
p++;
if (code2Index >= code2Len){
code2Index = 0;
}
if (code1Index >= code1Len) {
code1Index = 0;
}
}
*startC = '\0';
return c;
}
int main() {
FILE* fp;
fopen_s(&fp, "10.js", "rb");
fseek(fp, 0, SEEK_END);
int dwSize = ftell(fp);
byte* pBytes = new byte[dwSize];
fseek(fp, 0, SEEK_SET);
fread(pBytes, dwSize, 1, fp);
fclose(fp);
char* pwd = decodeByPass("fstat on bundle failed.","nativeRequire", pBytes, dwSize);
printf("%s\n", pwd);
system("pause");
return 0;
}
网友评论