美文网首页IT.技术分享
跟我一起从零开始学习WebAssembly(一)、环境配置

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

作者: 5de9e117f2fe | 来源:发表于2019-06-27 18:43 被阅读1次

    前言

    写在前面:本专栏只针对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,如下图:

    emsdk,bat
    如果我们安装不是上图中的版本,那么我们需要在该文件中添加上我们安装的对应的版本。个人建议安装2.7.13。
    这里注意一下在我们安装python的时候,注意不要全部默认安装:
    python安装
    特别要注意选上pip和Add python.exe to Path,然后一路点“Next”即可完成安装,否则需要自己手动设置环境变量。 由于部分电脑操作系统原因,不会立即刷新系统变量设置,所以,这三个软件安装完后,尽量重启一下电脑,避免出现后面cmake或者python命令用不上。

    按照官网进行安装

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

    先来一遍官网操作

    • 在本地磁盘新建一个名为emsdk的文件夹,本文放在F盘


      新建emsdk文件夹
    • 打开cmd命令提示符(管理员权限),并进入到emsdk目录


      打开命令提示符
    • 通过 Emscripten SDK 构建 Emscripten 是自动的,下面是步骤。
    # Get the emsdk repo
    git clone https://github.com/emscripten-core/emsdk.git
    

    运气好能够下成功,如图:

    succ
    毕竟由于网络问题,这里会出现两种下载失败的问题,一种是根本就连不上,另外一种就如下图所示,下到某个点,就卡死,一直不会动。
    fail
    你可以选择多试几次,总有一次会成功。但也可以换一种方式:如官网提示的功过GitHub下载,emsdk GitHub page
    github下载 clone

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


    第二路线
    • 进入目录
    cd emsdk
    
    • 更新
    emsdk update
    
    update
    • 安装
    emsdk install latest
    
    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
    

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

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

    大招来了

    在我们git到emsdk目录后,我们就不再按照官网来了。下面我们假设是已经获得了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_and_unzip
    目的是为了拿到我们想要的地址。
    + 删除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)
    
    delete code
    • 进入E:\emsdk目录
    cd E:\emsdk
    e: b 
    emsdk install latest
    
    get url
    • 复制地址到浏览器回车下载文件并保存到一个目录。


      zip_bat
    • E:\emsdk目录下新建zips文件夹
      新建zips
    • 复制刚刚下载的文件到


      copy
    • 再次执行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
    

    如果出现下面界面,说明安装成功了:


    install succ

    我用到的资源

    这里放上我用的资源,如果有人需要,可以去下载。
    我安装成功后的环境我压缩后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

    相关文章

      网友评论

        本文标题:跟我一起从零开始学习WebAssembly(一)、环境配置

        本文链接:https://www.haomeiwen.com/subject/yrhdcctx.html