loader 编写一个android_WebAssembly应用到前端工程（上）—— webassembly模块的编写...

前言

WebAssembly (abbreviated Wasm) is a binary instruction format for a stack-based virtual machine. Wasm is designed as a portable target for compilation of high-level languages like C/C++/Rust, enabling deployment on the web for client and server applications. WebAssembly(缩写 Wasm)是基于堆栈虚拟机的二进制指令格式。Wasm为了一个可移植的目标而设计的，可用于编译C/C+/RUST等高级语言，使客户端和服务器应用程序能够在Web上部署。

webassembly的介绍可以参考图说 WebAssembly。

本文以@ne_fe/gis这个模块的开发过程梳理webassembly如何应用到前端工程中。
注：使用emscripten完成weassembly开发至少需要基础的c/c++编码能力。

@ne_fe/gis简介

该模块主逻辑由c++编写，webpack配合emscripten附带的emcc编译器将其编译到wasm。提供大批量坐标的经纬度转换功能，在十几万坐标点转换的情况下，依然有优秀的性能表现。
具体其他信息可以参考npm上该模块的Readme。

Emscripten的安装

emscripten是webassembly官方推出的将c/c++代码编译成wasm文件的工具。
具体安装可以参照官网文档。

Webpack配置

主要针对c++源码文件，需要添加正确的loader进行处理。使用的loader为cpp-wasm-loader，下面是我的webpack.config.js所写大概配置，其他配置跟普通的webpack配置大致相同。

module.exports = {
    
  ...
  resolve: {
    
    extensions: [ '.js', '.vue', '.c', '.cc', '.cpp', '.wasm' ],
    alias: {
    
      vue$: 'vue/dist/vue.esm.js',
    },
  },
  ...
  module: {
    
    ...
     {
    
        test: /.(c|cc|cpp)$/,
        use: {
    
          loader: 'cpp-wasm-loader',
          options: {
    
            // 这里的两个参数，第一个是让emcc能够识别c++11的语法与特性
            // 第二个是让emcc能够将EMSCRIPTEN_BINDINGS宏里面所指定的类与方法能够在绑定到模块导出的js对象上，让js能够直接调用
            // 还可以传入其他clang编译器可接受的参数          
            emccFlags: existingFlags =