当前位置: 首页 > Web前端 > HTML5

Emscripten教程之文件与文件系统(四)

时间:2023-04-05 18:57:24 HTML5

译文:云凰北青本文为Emscripten-WebAssembly专栏系列之一。更多文章请查看专栏。也可以去作者的博客阅读文章。本节介绍如何在Emscripten编译的代码中使用文件。包含以下部分:文件系统概述:Emscripten支持的文件操作概述。打包文件:如何使用emcc打包编译代码需要的文件。同步虚拟XHR后台文件系统使用:介绍如何使用XHR通过http完成二进制数据的懒加载。下面对这三个部分一一进行讨论。1、文件系统概述分为两部分,一部分介绍Emscripten文件系统运行环境,另一部分介绍Emscripten文件系统架构。Emscripten的文件系统运行环境与nativecode和JS使用的文件访问方式有很大区别。Native代码使用libc和libcxx库来调用同步文件API,而JS除了webworkers之外只允许异步获取文件。另外,由于JS处于浏览器沙箱环境,不会直接访问宿主机的文件系统。Emscripten提供了一个模拟本地文件系统的虚拟文件系统,因此本机代码可以使用同步文件API,只需很少修改或无需修改。打包文件允许你指定你需要的文件,通过emcc打包到虚拟文件系统中。对于开发者来说,这部分包文件的知识是必须的。Emscripten文件系统架构下面列出了Emscripten文件系统的主要元素。大部分native代码调用libc和libcxx库的同步文件API,然后依次调用底层文件系统API,默认使用MEMFS虚拟文件系统。运行时初始化时,MEMFS挂载在根目录中。添加到MEMFS的文件在编译时由emcc打包。当加载HTML页面时,JS使用同步XHR异步加载(load)这些文件。编译后的代码只有在异步加载完成并且文件在虚拟文件系统中可用时才能执行。因为MEMFS实际上存在于内存中,所以当pagereload完成后,所有写入的数据都会丢失。如果你想持久化这些写好的东西,请在浏览器中挂载IDBFS文件系统,或者在Nodejs中挂载NODEFS。NODEFS可以访问本地文件系统。你可以自己写JS挂载新的文件系统,然后在这些文件系统中进行适合你的文件操作。如果您需要从网络获取其他文件到文件系统,请使用emscripten_wget()和Emscripten异步文件系统API中的其他方法。这些方法是同步的,应用程序必须等待回调完成。2、打包文件有两种可互换的打包方式:预加载和嵌入。嵌入式就是把特定的文件和编译后的JS文件混在一起放在同一个文件中。另一方面,预加载可以将文件单独打包成单个文件。embedding的方式效率不如preloading,使用上就是要打包的文件数量和文件体积都比较小。emcc使用文件打包器打包文件,然后在创建和加载文件系统时生成文件系统调用。虽然emcc是推荐的打包工具,但是你也可以直接使用文件打包器自己打包。用emcc打包文件最简单的方法是在编译时通过emcc打包。preload和embed代表你选择的打包方式。下面是一个示例打包命令:./emccfile.cpp-ofile.html--preload-fileasset_dir该命令将生成file.html、file.js、file.data。这个.data文件包含asset_dir目录下的所有文件,由file.js加载。下面的命令演示了嵌入模式下的打包。此时emcc生成file.html、file.js。asset_dir/目录下的内容直接打包成file.js。./emccfile.cpp-ofile.html--embed-fileasset_dir默认情况下,编译命令时要打包的文件应该在cd目录下,或者就在cd目录下。在运行时,虚拟文件??系统映射要打包的文件的相同目录结构。虚拟文件系统的根目录对应编译命令时cd的目录。比如有dir1/dir2/dir3/asset_dir/这样的目录结构,dir2就是要编译的项目。如果我们要打包asset_dir,我们使用相对路径dir3/asset_dir/。emcc命令窗口在dir2目录中打开。./emccfile.cpp-ofile.html--preload-filedir3/asset_dir打包编译后,通过dir3/asset_dir等路径在虚拟文件系统中也找到了asset_dir文件夹。同理,如果我们将一个文件打包到dir2下,那么在项目运行时,应该会在虚拟文件系统的根目录下找到dir2目录。打包时,还有一个@符号的用法,指的是将本地文件系统中任意目录下的文件映射到编译后的虚拟文件系统中的某个路径。使用文件打包器打包除了通过emcc命令编译时打包外,还可以手动运行文件打包器file_packager.py进行打包。捆绑器将生成.data和.js文件。.js文件包含使用.data文件的代码。注意:*使用文件打包器打包,这样您就不必在编译时打包(使用emccd编译)。*使用文件打包器将多个数据文件一个一个打包,然后输出多个.js文件。更改.data文件的位置默认情况下,.data文件和.js文件从相同的URL加载。有时将数据文件与其他类型的文件放在不同的位置很有用。使用Module.filePackagePrefixURL修改存储前的路径。该属性应在加载它的