Skip to content

Posts

TypeScriptのexport

MDMMLのTypeScript移植が大体できたので、HTMLから呼び出せるようにしたい。

先日はexportしてるはずなのに見つからないというエラーでどうしたら良いかわからず。

HTMLから外部のJavascriptファイルのfunctionを呼びたいはやりたいこととあっているように思える。

interface Window { Hello(): void; }
declare var window: Window;
window.Hello = () => {
    console.log(Buffer.from(MDtoSMF("cdefg")).toString("binary"));
};

としてみたら呼べたけれど、今度はBuffer is not definedだと。

いろいろやってみて、

import { MDtoSMF } from './mdmml';

interface Window { MDtoSMF(md: string): ArrayBuffer; }
declare var window: Window;
window.MDtoSMF = (md: string) => {
    return MDtoSMF(md);
};

これで動いた。正しい自信はない。。

Read more

TypeScriptで標準出力

マークダウンから変換したSMFデータを標準出力に書き出したいのだけれど、バイナリをそのまま出力する方法がわからず。。

console.logだと型情報とかついた普通のテキストになってしまう。

$ node dist/main.js
Uint8Array(45) [
  77,  84, 104, 100,  0,   0,   0, 6, 0,   1,  0,
   1,   3, 192,  77, 84, 114, 107, 0, 0,   0, 23,
   0, 255,   3,   0,  0, 255,  81, 3, 7, 161, 32,
   0, 255,  88,   4,  4,   2,  24, 8, 0, 255, 47,
   0
]

fsパッケージを使おうとしたけれど、Module not found: Error: Can't resolve 'fs'などと言われてbuildできず。

Read more

TextEncoderのエラー

replaceAllを使いたくて、tsconfig.jsonに以下設定を追加した。

    "lib": [
      "ES2021.String"
    ]

replaceAllが使えるようになったが、TextEncoderを使っているところでエラーになるようになってしまった。

error TS2304: Cannot find name 'TextEncoder'.

定義がないのか？と思って@types/text-encoding - npmにあるとおり追加してみた。

npm install --save @types/text-encoding

別のエラーが出るようになった。

Read more

Jestの導入

ブラウザからの動作確認はいったん置いておいて、コマンドライン実行で動くものを目指す。

どうせなら自動テストも動かしながらやっていきたい。

JavaScriptのテストフレームワークは、Jest · 🃏 Delightful JavaScript Testingが主流らしいので、それに乗っかる。

Typescriptでの単体テストの書き方(Jest) | スターフィールド株式会社を見ながらインストール。

$ npm install --save-dev jest typescript ts-jest @types/jest
$ npx ts-jest config:init
$ code jest.config.js
$ code package.json
$ npm run test
ts-jest[versions] (WARN) Version 28.0.3 of jest installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=27.0.0 <28.0.0-0). Please do not report issues in ts-jest if you are using unsupported versions.
ts-jest[config] (WARN) message TS151001: If you have issues related to imports, you should consider setting `esModuleInterop` to `true` in your TypeScript configuration file (usually `tsconfig.json`). See https://blogs.msdn.microsoft.com/typescript/2018/01/31/announcing-typescript-2-7/#easier-ecmascript-module-interoperability for more information.

jestとts-jestのバージョンが不一致らしい。

Read more

rewireでjest

テストのために関数exportしないといけないの、チョット気持ち悪いので、解決策を探ってみる。

jhnns/rewire: Easy monkey-patching for node.js unit testsが一般的らしい。

$ npm install -D rewire @types/rewire

テストコードのimportを修正

import rewire from 'rewire';

const __local__ = rewire('./mdmml.ts');
const atoi = __local__.__get__('atoi')

テスト実行

$ npm test

> mdmml_js@1.0.0 test
> jest

 FAIL  src/mdmml.test.ts
  ● Test suite failed to run

    /home/umemak/workspace/mdmml_js/src/mdmml.ts:8
        Tracks: Track[] = [];
        

    SyntaxError: Unexpected identifier

      at Object.load (node_modules/rewire/lib/moduleEnv.js:57:18)
      at internalRewire (node_modules/rewire/lib/rewire.js:49:15)
      at rewire (node_modules/rewire/lib/index.js:11:12)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.01 s
Ran all test suites.

関係ないところでエラーになるようになってしまった。。

Read more

http-serverメモ

ローカルでチョット確認するためのhttpサーバー立てるのに便利なhttp-party/http-server: a simple zero-configuration command-line http server。

最近、起動はするもののリクエストを送ると終了してしまう現象が起きていて、ググったらissueがあった。

バージョン13.0.2だと大丈夫らしい。

$ npx http-server@13.0.2

大丈夫だった。

webpackで構築

昨日は、TypeScript環境構築に手間をかけたくないという想いでParcelを試してみたところ、エラーで途方に暮れていた。

今日は、古き良きwebpackを試した。

参考にしたページはこちら

$ npm init -y
$ npm i -D webpack webpack-cli typescript ts-loader
$ code package.json
$ code tsconfig.json
$ code webpack.config.js
$ code src/main.ts
$ npm run build
> mdmml_js@1.0.0 build /home/umemak/workspace/mdmml_js
> webpack

asset main.js 1.2 KiB [emitted] (name: main)
./src/main.ts 14 bytes [built] [code generated]
webpack 5.72.0 compiled successfully in 1126 ms

できた。 楽をしようとしてかえって遠回りになった経験だった。

Read more