跟我一起从零开始学习WebAssembly(一)、环境配置

前言

写在前面：本专栏只针对Windows系统记录讲解。
当前系统版本：Microsoft Windows [版本 10.0.18362.175]
Emscripten SDK版本：emsdk-1.38.36
python版本：python-2.7.13.amd64
Git版本：Git-2.22.0-64-bit
CMake版本：cmake-3.15.0-rc2

在WebAssembly开发人员指南、Emscriptem官网安装指南或者WebAssembly开发人员指南(中文网)都有专门安装的步骤，此外网上还有很多介绍环境安装的文章。但都大同小异，看似都很简单，就那么几个步骤，过程这里不复述。但真有那么简单么，试过的人都知道?，其实本来是简单的，但由于各种原因吧，我们需要FQ ✈️，这个不说能不能上，网速也是问题，比如下很久下了一大半，突然断开连接了，前面的就白下了?。
本文介绍的方法不需要FQ，不用下载全包（安装的是最新版本）。耗时一天半才研究出来，说多了都是泪???。其实本来可以不这么折腾的，下个全包，旧点就旧点吧，但本着学习的精神还是把它研究出来了。
下面正式开始介绍具体安装步骤，及我在安装过程中走过的弯路，供参考????

准备工作

在正式开始安装emsdk之前，必须安装好三个软件：cmake、Git、python。
cmake、git版本不限，网上很多写得很好很详细的安装教程，这里不细说，但建议安装最新的；python版本就要注意一下了，官网指出的是2.7.12及以后的，当前2.7.x最新的是2.7.16，我刚开始安装的是最新版本，但在运行时，就要注意一下了，当前emsk.bat里面最新到2.7.13，如下图：

如果我们安装不是上图中的版本，那么我们需要在该文件中添加上我们安装的对应的版本。个人建议安装2.7.13。
这里注意一下在我们安装python的时候，注意不要全部默认安装：

特别要注意选上pip和Add python.exe to Path，然后一路点“Next”即可完成安装，否则需要自己手动设置环境变量。 由于部分电脑操作系统原因，不会立即刷新系统变量设置，所以，这三个软件安装完后，尽量重启一下电脑，避免出现后面cmake或者python命令用不上。

按照官网进行安装

此处参照的是emsdk官网安装文档安装的。
如果一次性安装成功了，那么恭喜你。

先来一遍官网操作

• 在本地磁盘新建一个名为emsdk的文件夹，本文放在F盘
  
• 打开cmd命令提示符(管理员权限),并进入到emsdk目录
  
• 通过 Emscripten SDK 构建 Emscripten 是自动的，下面是步骤。

# Get the emsdk repo
git clone https://github.com/emscripten-core/emsdk.git

运气好能够下成功，如图：

毕竟由于网络问题，这里会出现两种下载失败的问题，一种是根本就连不上，另外一种就如下图所示，下到某个点，就卡死，一直不会动。

你可以选择多试几次，总有一次会成功。但也可以换一种方式：如官网提示的功过GitHub下载，emsdk GitHub page

然后解压，进入目录。
我们这里走第二种路线，因为这条路线可以不用FQ，。

• 进入目录

cd emsdk

• 更新

emsdk update

• 安装

emsdk install latest

这里就开始报错了(由于不是FQ，有时候也能成功，我第一次就成功，但后面一次没成功过，看人品)，

Installing SDK 'sdk-releases-fastcomp-d46be49c2aab975333423122239892bd46f52bba-64bit'..
Installing tool 'releases-fastcomp-d46be49c2aab975333423122239892bd46f52bba-64bit'..
Error downloading URL 'https://storage.googleapis.com/webassembly/emscripten-releases-builds/win/d46be49c2aab975333423122239892bd46f52bba/wasm-binaries.zip': [Errno 10060]
Traceback (most recent call last):
  File "E:\emsdk\\emsdk", line 2640, in <module>
    sys.exit(main())
  File "E:\emsdk\\emsdk", line 2622, in main
    success = tool.install()
  File "E:\emsdk\\emsdk", line 1526, in install
    success = tool.install()
  File "E:\emsdk\\emsdk", line 1542, in install
    success = download_and_unzip(url, self.installation_path(), download_even_if_exists=download_even_if_exists, filename_prefix=filename_prefix)
  File "E:\emsdk\\emsdk", line 1107, in download_and_unzip
    assert received_download_target == download_target
AssertionError

通过Error我们知道访问地址出错，现在我们将这个地址

https://storage.googleapis.com/webassembly/emscripten-releases-builds/win/d46be49c2aab975333423122239892bd46f52bba/wasm-binaries.zip

拷贝至浏览器(各种浏览器都行)地址栏，回车：

都到这了，还在犹豫什么呢，当然是保存到本地磁盘。
备注：最好新建一个目录专门放这几个文件，后面还会接着下载，而且每次用到了都会被删除。所以做好备份。
这种方法虽然可行但是不太好，因为每次都需要去连接地址，还是存在连不上的情况。

大招来了

在我们git到emsdk目录后，我们就不再按照官网来了。下面我们假设是已经获得了emsdk目录。

• 修改E:\emsdk目录下的emsdk文件
  • 在download_and_unzip函数中加入几句代码

  print("\n\n\n")
  print("------------------------------------our need url----------------------------------------------")
  print(url)
  print("-----------------------------------------the end-------------------------------------------------------")
  print("\n\n\n") 

目的是为了拿到我们想要的地址。
+ 删除download_file函数中的如下代码：

try:
    u = urlopen(url)
    mkdir_p(os.path.dirname(file_name))
    with open(file_name, 'wb') as f:
      file_size = get_content_length(u)
      if file_size > 0: print("Downloading: %s from %s, %s Bytes" % (file_name, url, file_size))
      else: print("Downloading: %s from %s" % (file_name, url))

      file_size_dl = 0
      # Draw a progress bar 80 chars wide (in non-TTY mode)
      progress_max = 80 - 4
      progress_shown = 0
      block_sz = 8192
      if not TTY_OUTPUT:
          print(' [', end='')
      while True:
          buffer = u.read(block_sz)
          if not buffer:
              break

          file_size_dl += len(buffer)
          f.write(buffer)
          if file_size:
              percent = file_size_dl * 100.0 / file_size
              if TTY_OUTPUT:
                  status = r" %10d  [%3.02f%%]" % (file_size_dl, percent)
                  print(status, end='\r')
              else:
                  while progress_shown < progress_max * percent / 100:
                      print('-', end='')
                      sys.stdout.flush()
                      progress_shown += 1
      if not TTY_OUTPUT:
          print(']')
  except Exception as e:
    print("Error downloading URL '" + url + "': " + str(e))
    rmfile(file_name)
    return None
  except KeyboardInterrupt as e:
    print("Aborted by User, exiting")
    rmfile(file_name)
    sys.exit(1)

• 进入E:\emsdk目录

cd E:\emsdk
e: b 
emsdk install latest

• 复制地址到浏览器回车下载文件并保存到一个目录。
  
• 在E:\emsdk目录下新建zips文件夹
  
• 复制刚刚下载的文件到
  
• 再次执行emsdk install latest 因为包比较大，所以执行时间会比较长，耐心等一下。
  执行完成后，重复上面的步骤（复制红框中的地址）
  
  这里需要注意的是，有几个文件执行完后会被删除，由于我们后面的步骤需要依赖前面的步骤，所以在执行下一步时，我们把上一步执行的文件拷贝到zips目录，当然也可以修改emsdk里面的代码，让它对比如果已经解压的就不再重复执行或者在每一步执行完后，不删除文件。这里不做修改。
  一直执行，直到全部完成。
  当执行完后，没有出现新的url，那么说明执行完了：
  
• 激活sdk

emsdk activate latest
//如果我们需要配合vs2017编译器，则执行一下命令
//emsdk activate --vs2017 latest

这时我们去系统变量查看，发现居然没有配置上

回头来再看下，我们执行命令后的提示：

The changes made to environment variables only apply to the currently running shell instance. Use the 'emsdk_env.bat' to re-enter this environment later, or if you'd like to permanently register this environment globally to all users in Windows Registry, rerun this command with the option --global.

翻译过来就是

对环境变量所做的更改仅适用于当前运行的shell实例。 以后使用，需要重新通过'emsdk_env.bat'配置环境，或者如果您要将此环境全局永久注册到Windows注册表中的所有用户，请使用选项--global重新运行此命令

所以重新修改命令：

emsdk activate --global --vs2017  latest

• 写入环境变量

emsdk_env.sh

• 测试

emcc -v

如果出现下面界面，说明安装成功了：

我用到的资源

这里放上我用的资源，如果有人需要，可以去下载。
我安装成功后的环境我压缩后emsdk.zip 提取码: dp5b
d46be49c2aab975333423122239892bd46f52bba-wasm-binaries.zip 提取码: k15g
node-v8.9.1-win-x64.zip
portable_jre_8_update_152_64bit.zip
WinPython-64bit-2.7.13.1Zero.zip
binaryen-e1.38.31.zip