美文网首页Front End
[FE] hello assemblyscript

[FE] hello assemblyscript

作者: 何幻 | 来源:发表于2018-07-10 10:28 被阅读2次

1. 背景

AssemblyScript 是一个从 TypeScriptWebAssembly 的编译器。

2. 环境初始化

2.1 新建工程

$ mkdir test-assemblyscript && cd test-assemblyscript && npm init -f

2.2 安装依赖

$ npm i -S AssemblyScript/assemblyscript glob

目录结构

.
├── node_modules
├── package-lock.json
└── package.json

3. assemblyscript相关

3.1 生成脚手架

$ npx asinit .

目录结构

.
├── assembly
│   ├── index.ts
│   └── tsconfig.json
├── build
│   └── .gitignore
├── index.js
├── node_modules
│   ├── .bin
│   │   ├── asc
│   │   ├── asinit
│   │   ├── binaryen-as
│   │   ├── binaryen-dis
│   │   └── binaryen-opt
├── package-lock.json
└── package.json

注:
(1)npx是npm默认全局安装的一个包,即,

$ npm install -g npx

npx用于执行包中的二进制文件,
npx asinit .,相当于`npm bin`/asinit .,即./node_modules/.bin/asinit .

Executes <command> either from a local node_modules/.bin, or from a central cache, installing any packages needed in order for <command> to run.

(2)index.js内容如下,

const fs = require("fs");
const compiled = new WebAssembly.Module(fs.readFileSync(__dirname + "/build/optimized.wasm"));
const imports = {};
Object.defineProperty(module, "exports", {
  get: () => new WebAssembly.Instance(compiled, imports).exports
});

其中,new WebAssembly.Module用来加载wasm模块。

Object.defineProperty(module, "exports", { get: ()=> ... });
用来给module定义一个名为exportget方法,
参考,Object.defineProperty

3.2 构建

$ npm run asbuild

4. 例子

新建main.js

const { add } = require('./index');

const r = add(1, 2);
console.log(r);

node运行一下,

$ node main.js
> 3

参考

github: AssemblyScript/assemblyscript
npx
Object.defineProperty

相关文章

  • [FE] hello assemblyscript

    1. 背景 AssemblyScript 是一个从 TypeScript 到 WebAssembly 的编译器。 ...

  • [FE] Hello Angular

    AngularJS 1.x是Angular的上一代框架,Angular团队做了规范,老框架为AngularJS 1...

  • [FE] Hello Vue

    1. 安装Vue (1)全局安装vue-cli (2)在工程目录中,创建一个基于 webpack 的新项目 (3)...

  • [FE] hello-mobx

    1. 项目初始化 2. 安装开发环境依赖 3. 安装模块依赖 4. 新建./.babelrc和./webpack....

  • [FE] Hello Service Worker

    启动服务器 MDN: Service Worker文档中指出,Service Worker只能用在使用https协...

  • [FE] hello webpack loader

    webpack loader是一个node模块,它导出了一个函数,当使用该loader载入文件的时候,webpac...

  • [FE] Hello Ant Design

    1. 环境搭建: (1)安装node.js (2)更换npm为淘宝的源 (3)安装webpack,babel和脚手...

  • [FE] Hello "Observable Hooks"

    最近项目中用到了 react + rxjs + observable-hooks,下文总结一下 observabl...

  • [FE] hello-styled-components

    1. 项目初始化 2. 安装开发环境依赖 3. 安装模块依赖 4. 新建./.babelrc和webpack.co...

  • [FE] Hello Cycle.js

    1. 安装 (1)全局安装webpack和babel (2)安装babel-loader和babel-plugin...

网友评论

    本文标题:[FE] hello assemblyscript

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