편집: 이 안내서는 2진 데이터를wasm로 보내는 것에 대한 제목까지 정확합니다.곧 업데이트됩니다!내일 다시 오세요!
웹을 이용하여 조립하는 것은 상당히 큰 도전이지만, 이 점을 할 수 있는 좋은 방법이 많다.emscripten 도구 체인이나rustwasm를 사용하여 목표를 컴파일하는 것은 좋은 방법입니다. 금속 근처에 앉아 있는 개발자들에게는 손을 더럽히고 웹 응용 프로그램을 웹 조립으로 지원하는 좋은 방법입니다.
그러나 일반 개발자들은 AssemblyScript가 더 쉽게 접근할 수 있음을 발견할 수 있습니다. 이것은 TypeScript의 사투리를 웹 Assembly로 컴파일합니다!

어셈블리 스크립트 / 어셈블리 스크립트

WebAssembly 컴파일러의 TypeScript는 절대 아닙니다.🚀

AssemblyScript는 TypeScript을 사용하여 WebAssembly(기본적으로 유형이 있는 JavaScript)의 엄격한 변체를 Binaryen으로 컴파일합니다.그것은 npm install마일 떨어진 곳에서 정익과 평균 WebAssembly 모듈을 생성했다.

에 관하여 인용문· 빠른 시작 개발 설명

공헌자

우리 스폰서 고마워요!

대부분의 핵심 팀원들과 대부분의 공헌자들은 여가 시간에 이 개원 작업을 한다.AssemblyScript를 사용하여 중요한 작업을 수행하거나 이 작업을 수행할 계획이며 더 많은 시간을 투자하려면 please donate에서 OpenCollective으로 이동하십시오.이 프로젝트에 협찬하면 로고가 아래에 표시됩니다.지지해 주셔서 감사합니다!

View on GitHub
Assembly Script는 현재github에 최신, 가장 자랑스러운 형식으로 등장하고 있습니다.dev 지점에 메모리 관리를 돕기 위해 인용 계수를 사용하는 쓰레기 수집 버전이 있습니다.우리는 dev 지점을 예로 들 것이다.
Assembly Script는 내가 사용한 가장 재미있는 언어 중의 하나이다.로켓선을 증기기관차에 연결하는 것처럼 타자 스크립트를 사용하고 작성한다.만약 미친 듯이 들린다면, 너는 옳다.
나는 일을 분명히 말하고 싶다.모든 프로그래밍 해결 방안은 단지 다른 그룹이 배워야 할 문제일 뿐이다.그러니까 걱정하지 마!테스트 항목을 시작해서 손이 최대한 더러워지도록 하세요.

AssemblyScript 사용 방법

그럼 바로 시작합시다!새 프로젝트를 설치해야 하기 때문에 명령을 실행합니다.

npm init
npm install assemblyscript/assemblyscript
npx asinit .

폴더 구조를 만들고 몇 개의 파일을 터치하며 package.json 파일을 수정하여 편리한 npm 스크립트를 포함하도록 합니다.다음은 생성되고 수정될 중요한 파일 목록입니다.

 Modified: ./package.json
Directory: ./assembly/
  Created: ./assembly/index.js
  Created: ./assembly/tsconfig.json

AssemblyScript는 특수한 typescript 설정을 만들었습니다.Assembly Script에 유형과 규칙이 포함되어 있기 때문입니다.AssemblyScript 표준 라이브러리의 함수와 일치하도록 이 유형을 유지합니다.
우선 ./assembly/index.ts 파일을 살펴보겠습니다.

// ./assembly/index.ts
/**
 * Exporting a function from the index.ts file will cause AssemblyScript to
 * generate a corresponding function that will be exported to JavaScript.
 **/
export function add(a: i32, b: i32): i32 {
  return a + b;
}

AssemblyScript에는 특수한 숫자 유형이 있습니다. 본고는 잠시 후에 이에 대해 설명하겠습니다.이제 이 AssemblyScript 모듈을 실제로 구축하겠습니다.우리는 우리가 만든 asbuildnpm 스크립트를 실행함으로써 이 점을 실현합니다.

npm run asbuild

이것은 새로 만든 ./build/ 폴더에 일련의 새로운 웹 조립 모듈을 만들 것입니다.

Created: ./build/optimized.wasm
Created: ./build/optimized.wasm.map
Created: ./build/optimized.wat
Created: ./build/untouched.wasm
Created: ./build/untouched.wasm.map
Created: ./build/untouched.wat

모듈을 디버깅할 때 untouched 버전을 사용하는 것이 좋습니다.모듈과 묶을 준비가 되면 optimized 버전을 보내주십시오.AssemblyScript는 원본 맵과 .wat 파일을 생성합니다. 이것은 생성된 .wasm 파일의 텍스트 표시 형식입니다.만약 당신이 막 시작한다면, 반드시 .wat 파일을 검사해서 무엇이 생성되었는지 보십시오.

AssemblyScript 모듈 사용

AssemblyScript 자체 로드 프로그램.그것은 실례화 모듈의 표준 방법을 제공했다.

// ./src/index.ts

/**
 * Import the AssemblyScript loader here. If this code runs in the browser,
 * call the `instantiateStreaming` function, otherwise the `instantiateBuffer`
 * method is used in node.js.
 */
import { instantiateStreaming, ASUtil } from "assemblyscript/lib/loader";

/**
 * Defining an interface like this allows you to define the shape of the exported
 * Web Assembly module. Each parameter is a number. Later, when we want to push
 * a string into our module, we will have to generate a pointer to a string.
 * The add function takes two integer parameters and will assume the value is `0`
 * if the parameter is not provided.
 */
interface MyApi {
  add(a: number, b: number): number;
}

/**
 * Imports are used to specify functions that need to be linked. This will be
 * discussed in greater detail later. For now, leave the imports object empty.
 **/
const imports: any = {};

/**
 * Now, let's instantiate our module. Using `fetch()` allows the browser to 
 * download and parse the module at exactly the same time.
 */
async function main(): void {
  var interop: ASUtil & MyApi =
    await instantiateStreaming<MyApi>(fetch("../build/untouched.wasm"), imports);

  // Finally, call the add function we exported
  console.log("The result is:", interop.add(1, 2));
}

콘솔은 예상 결과를 출력해야 합니다. 즉...

The result is: 3

다음은 언어 자체에 대해 토론해 봅시다.

AssemblyScript 언어

AssemblyScript 번호

AssemblyScript 프로그래밍 언어는 TypeScript의 하위 집합으로 약간 수정되었습니다.그것은 가능한 한 ECMAScript 규범에 접근하는 것이 목표이기 때문에 자바스크립트 개발자들이 익숙해야 할 표준 라이브러리를 첨부했다.사실상 당신이 필요로 하는 대부분의 기능은 이미 실현되었거나 특수한 방식으로 제한을 받는다. 이런 방식은 웹 프로그램에서 집중적으로 실행되는 것과 관련이 있다.
AssemblyScript는 웹 프로그램 집합 규범에서 실현된 전용 디지털 형식을 직접 이용했다.따라서 Web Assembly에서 사용하는 숫자 유형에는 유형 별칭이 있습니다. 기존의 TypeScript 도구를 사용할 때 이 별칭은 number으로 해석됩니다.

var int8: i8 = <i8>0; // 8-bit signed integer [-128 to 127]
var uint8: u8 = <u8>0; // 8-bit unsigned integer [0 to 255]
var int16: i16 = <i16>0; // 16-bit signed integer [-32,768 to 32,767]
var uint16: u16 = <u16>0; // 16-bit unsigned integer [0 to 65,535]
var int32: i32 = <i32>0; // 32-bit signed integer [-2,147,483,648 to 2,147,483,647]
var uint32: u32 = <u32>0; // 32-bit unsigned integer [0 to 4,294,967,295]
var int64: i64 = <i64>; // 64-bit signed integer [-9,223,372,036,854,775,808 to 9,223,372,036,854,775,807]
var uint64: i64 = <u64>0; // 64-bit unsigned integer [0 to 18,446,744,073,709,551,615]
var float32: f32 = <f32>0.0; // 32-bit float [32 bit float range]
var float64: f64 = <f64>0.0; // 64-bit float [64 bit float range]
var pointer: usize = <usize>0; // a 32/64-bit pointer to a location in memory

모든 디지털 형식은 i32, i64, f32과 f64 값에 저장되어 있으며, 일반적인 웹 위젯 번호와 같다.
일부 수학 연산은 현식이 다른 숫자 유형으로 바뀌어야 한다.만약 당신이 망쳤다면, 의외로 부동점과 정수를 함께 추가하면, 컴파일러는 당신에게 적당한 디지털 변환을 실행하라고 알릴 것입니다.

AssemblyScript 함수

대부분의 함수는 반드시 되돌아오는 형식으로 주석을 해야 한다.

function add(a: i32, b: i32): i32 {
  return a + b;
}

var myVerboseSumFunction: (a: i32, b: i32) => i32 =
  (a: i32, b: i32): i32 => a + b;

특히 두 숫자만 더하고 싶을 때 지루해진다.그러나 함수를 작성할 때 명확하게 주석하는 것은 좋은 습관이다.패턴 매핑과 감소를 실행할 때 화살표 함수가 좀 보기 흉해 보일 수 있습니다.아직 폐쇄가 지원되지 않기 때문이다.이러한 기능을 모듈의 전체 범위로 끌어올려야 할 수도 있습니다.

/**
 * Use every function parameter here. It's quite verbose.
 **/
function add(left: i32, right: i32, index: i32, self: Int32Array): i32 {
  return left + right;
}

var myArray: Int32Array = new Int32Array(100);

var sum: i32 = myArray.reduce(add);

AssemblyScript가 참조 계수를 가지고 있는 이상 최종적으로 패키지 닫기를 지원합니다.

AssemblyScript 클래스

클래스는 Assembly Script에서 사용하기 쉽습니다.예를 들어, 벡터 클래스를 예로 들겠습니다.

/**
 * Exporting a class in an AssemblyScript module only exports its functions.
 * Emscripten generates glue code for classes, and AssemblyScript does not come
 * with this feature. Instead, exporting a class to JavaScript will add all the
 * prototype functions, property gets/sets, and constructor functions to the
 * exports object.
 */
export class Vec_3 {

  /**
   * Constructors work exactly like TypeScript.
   */ 
  constructor(
    public x: f64 = 0.0,
    public y: f64 = 0.0,
    public z: f64 = 0.0,
  ) {}

  /**
   * Operator overloading is supported in AssemblyScript using the `@operator`
   * decorator. We can even ask this computation to happen inline with the 
   * `@inline` function decorator to cause this computation to happen in an 
   * "inline" fashion. It's limited to operations that can be performed on the 
   * *same* object type. Calling a "+" operator on a `Matrix` with a `Vector` is 
   * not valid in AssemblyScript.
   */
  @inline @operator("+")
  protected add_vector(value: Vec_3): Vec_3 {
    return new Vec_3(this.x + value.x, this.y + value.y, this.z + value.z);
  }

  /**
   * To make a computed property, follow the ECMAScript syntax for computed
   * properties.
   **/
  public get length(): f64 {
    return Math.sqrt(this.x * this.x + this.y * this.y + this.z + this.z);
  }
}

만약 유형이null이 필요하다면, 우리는 유형 연합 문법을 사용합니다.

/**
 * Nullable types are only valid on *reference* types, or strings.
 **/
var my_vector: Vec_3 | null = null;

/**
 * Nullable numbers, when set to null will equal `0`. Currently, this is a
 * limitation of the Web Assembly specification. AssemblyScript cannot discern
 * between the number `0` and `null`. Therefore, all the number types must be
 * represented as valid numeric values.
 **/
var my_number: i32 | null = null;
assert(my_number == 0); // true

null로 사용할 수 있는 숫자 형식을 사용하면 AssemblyScript 컴파일러가 경고를 표시합니다.다중 값 반환 형식을 지원할 때, 이 점은 바뀔 가능성이 있습니다.다중 값 반환 유형은 하나의 값이 아닌 여러 개의 숫자를 스택에 반환하여 AssemblyScript가 null과 0 사이를 구분할 수 있도록 합니다.
여기서 다중 값이 반환되는 개요를 볼 수 있습니다.

네트워크 조립 / 다수치

WebAssembly에 여러 값을 추가하는 것이 좋습니다.

WebAssembly의 다중 값 제안

주: 본 제안은 2020년 4월 9일에 WebAssembly 표준에 통합되었습니다.
이 저장소는 github.com/WebAssembly/spec/의 클론입니다.
WebAssembly에 여러 개의 값을 되돌려주는 지원을 추가하기 위한 제안에 대한 토론, 원형 규범화, 실현을 목적으로 합니다.

제안에 대한 요약은 overview을 참조하십시오.

상세한 것은 modified spec입니다.

업스트림 저장소의 원래 README은 다음과 같습니다.

규격

이 저장소에는 WebAssembly의 원형 참조 구현이 포함되어 있습니다.
현재 정부 규범으로결국 우리는
인류가 읽을 수 있는 산문이나 정식 형식으로 규범을 작성하다
규범 언어.
여기에는 WebAssembly 테스트 키트도 포함되어 있습니다. 이 키트 테스트는
규범에 부합하다.
webassembly.github.io/spec을 클릭하여 건설 공사 규범을 확인하세요.
현재 이 저장소의 내용은 개발 중이며 이미 알려져 있다
불완전, 부정확.
참여를 환영합니다.새로운 기능, 중요...
View on GitHub
Assembly Script 클래스의 또 다른 진정한 지원 기능은 범용!

/**
 * This is a class that pushes `T` values to the protected `data` array.
 **/
class Writer<T> {
  protected data: T[] = new Array<T>(0); 
  constructor() { }

  @inline
  protected write(value: T): void {
    this.data.push(value);
  }
}

클래스 확장도 예상대로 작동합니다.

class MyWriter extends Writer<f64> {
  constructor() {
    super(); // always call super
  }

  /**
   * Access parent class functions on `super`!
   **/
  public write_value(value: f64): void {
    super.write(value);
  }
}

Javascript에 연결

AssemblyScript는 declare 키워드를 다시 사용하여 링크 함수를 지정합니다.일반적으로 declare은 다른 곳에서 정의된 기존 환경 함수를 설명하는 데 사용되지만, 여기서 이 문법을 사용하여 웹 프로그램 집합 가져오기를 생성하는 것은 의미가 있다.
다음 가져오기 함수를 보겠습니다.

var imports: any = {
  customMath: {
    add(a: number, b: number): number {
      return a + b;
    }
  }
};

var wasm: ASUtil = instantiateStreaming<MyAPI>(fetch("./module.wasm"), imports);

다음은 모듈이 모듈에서add 함수를 어디서 찾는지 알려 줍니다.

// @ts-ignore: import a custom_add function from the customMath.add namespace
@external("customMath", "add")
export declare function custom_add(a: f64, b: f64): f64;

웹 프로그램 집합이 JavaScript를 호출하면 유형에 관계없이 매개 변수는 64비트 부동 소수점이 됩니다.이것은 객체 참조와 문자열을 반환하는 것과 같습니다.예를 들어, JavaScript에 Image 또는 string을 전달하려면 다음과 같이 하십시오.

class Image {
  width: i32;
  height: i32;
}

@external("image", "load")
export declare function image_load(image: Image, source: string): void;

그리고 AssemblyScript에 프로그램 패키지 문자열 값을 불러오고 메모리에 수동으로 접근해야 합니다.

// ./src/index.ts

var wasm: ASUtil<T>;

var imports = {
  image: {
    // image references and string references are pointers
    load(imgPointer: number, sourcePointer: number): void {
      // Do something with source now
      var source: string = wasm.__getString(sourcePointer);
      fetch(source).then(e => e.blob())
        .then(e => createImageBitmap(e))
        .then(e => {
          var imageIndex: number = imgPointer / 4; // the pointer is properly aligned
          wasm.I32[imageIndex] = e.width; // width property is first i32
          wasm.I32[imageIndex + 1] = e.height; // height is second property
        });
    }
  }
};

wasm = await instantiateStreaming<T>(fetch("my/assemblyscript.wasm"), imports);

웹 프로그램에서 메모리를 집중적으로 쓰고 읽는 것은 관리하기 쉽다.

결론

모든 언어는 한계성과 결함이 있다.AssemblyScript도 예외는 아니지만 매혹적이고 신기한 도구입니다. 코드를 가속할 수 있고 도구에 쉽게 넣을 수 있습니다.언제든지 본고에 대해 피드백을 제공하거나 평론 부분에서 어떤 문제를 제기해 주십시오.
테스트 프레임워크를 사용하는 것을 잊지 마세요.😉

제트너 / pect로

🔥몹시 더웠어🔥 AssemblyScript 빠른 테스트 사용

jtenner/as pect

이 패키지는monorepo로 cli와 @as-pect 패키지의 핵심을 포함한다.




AssemblyScript에서 모듈 작성 및 빠른 부트 테스트
WebAssembly 속도 사용!

문서

문서를 보려면gitbook의 here을 방문하십시오.문서에 문제가 있으면 언제든지 문제를 제출하십시오!

공헌자

투고하려면 CONTRIBUTING.md을 참조하십시오.
감사합니다. @willemneal과.
@MaxGraey 그들의 지지에 감사드립니다. as-pect을
그것은 아마도 가장 좋은 소프트웨어일 것이다.
기타 공헌자:

@trusktr - 파일 변경

성능 API 권장

@MaxGraey - 파일 변경

@torch2424 - Assembly Script 자체 생성!

기타 기능

대단히 감사합니다

특히 감사합니다. @dcodeio.
AssemblyScript 자체의 팀을 만드는 데 사용됩니다.
@9oelM
즐거운 인코딩!
- 조시