esbuildはexport declareを解決してくれな

from ✅source map付きでapp.tsをbuildする (@takker/ScrapJupyter)

esbuildがexport declare const scrapbox: Scrapboxを認識してくれない？

理由：Cannot import declared enum · Issue #1253 · evanw/esbuild

対策

方法1: anyにキャストして、globalThisに強制的に生やす

$ deno check --remote -r=https://scrapbox.io https://scrapbox.io/api/code/takker/esbuildはexport_declareを解決してくれな/test-success1.ts

/*@__PURE__*/を有効にするために、IIFEで囲んでいる

minifyすると、IIFEは消える

code:scrapbox-success1.ts

import type { Scrapbox } from "https://raw.githubusercontent.com/scrapbox-jp/types/0.3.8/userscript.ts";

export const scrapbox: Scrapbox = /* @__PURE__ */ (

// deno-lint-ignore no-explicit-any

() => (globalThis as any).scrapbox

)();

code:test-success1.ts

import { scrapbox } from "./scrapbox-success1.ts";

alert(scrapbox.Project.name);

方法2: declare宣言したあと、1度別の変数に代入して、それをexportする

✅️esbuild

$ deno check --remote -r=https://scrapbox.io https://scrapbox.io/api/code/takker/esbuildはexport_declareを解決してくれな/test-success2.ts

code:scrapbox-success2.ts

import type { Scrapbox } from "https://raw.githubusercontent.com/scrapbox-jp/types/0.3.8/userscript.ts";

declare const scrapbox: Scrapbox;

const k = scrapbox;

export { k as scrapbox };

// cannnot export directly

// export { scrapbox };

code:test-success2.ts

import { scrapbox } from "./scrapbox-success2.ts";

alert(scrapbox.Project.name);

Deno v2.0.5とesbuild v0.24.0で動くことを確認した

2021-11-15時点の対策

ファイルごとにdeclare const scrapbox: Scrapboxを定義する

これしかなさそう

10:40:24 これで解決させた

2024-11-13 11:00:09 scrapbox-jp/typesはこの方法で処理する前提にしたため、scrapboxなどをexportしなかった

試したもの

export declare

❌️build

No matching export errorが出る

$ deno check --remote -r=https://scrapbox.io https://scrapbox.io/api/code/takker/esbuildはexport_declareを解決してくれな/test.ts

型checkは通る

code:scrapbox.ts

import type { Scrapbox } from "https://raw.githubusercontent.com/scrapbox-jp/types/0.3.8/userscript.ts";

export declare const scrapbox: Scrapbox;

code:test.ts

import { scrapbox } from "./scrapbox.ts";

alert(scrapbox.Project.name);

declare & export

✅️build

$ deno check --remote -r=https://scrapbox.io https://scrapbox.io/api/code/takker/esbuildはexport_declareを解決してくれな/test0.ts

pass

code:scrapbox2.ts

import type { Scrapbox } from "https://raw.githubusercontent.com/scrapbox-jp/types/0.3.8/userscript.ts";

declare const scrapbox: Scrapbox;

const k = scrapbox;

export { k as scrapbox };

// cannnot export directly

// export { scrapbox };

code:test0.ts

import { scrapbox } from "./scrapbox2.ts";

alert(scrapbox.Project.name);

declare & interface Windowの拡張

✅️build

$ deno check --remote -r=https://scrapbox.io https://scrapbox.io/api/code/takker/esbuildはexport_declareを解決してくれな/test0.ts

pass

code:interface.ts

import type { Scrapbox } from "https://raw.githubusercontent.com/scrapbox-jp/types/0.3.8/userscript.ts";

interface Window {

scrapbox: Scrapbox;

}

export const scrapbox = window.scrapbox;

code:test01.ts

import "./interface.ts";

alert(scrapbox.Project.name);

daclare namespace {}

✅️build

成功する

$ deno check --remote -r=https://scrapbox.io https://scrapbox.io/api/code/takker/esbuildはexport_declareを解決してくれな/test2.ts

失敗する

code:namespace.ts

import type { Scrapbox } from "https://raw.githubusercontent.com/scrapbox-jp/types/0.3.8/userscript.ts";

declare namespace ScrapboxUserScript {

const scrapbox: Scrapbox;

}

code:test2.ts

import "./namespace.ts";

alert(scrapbox.Project.name);

❌️build

The constant "scrapbox" must be initialized

$ deno check --remote -r=https://scrapbox.io https://scrapbox.io/api/code/takker/esbuildはexport_declareを解決してくれな/test2.ts

失敗する

code:namespace2.ts

import type { Scrapbox } from "https://raw.githubusercontent.com/scrapbox-jp/types/0.3.8/userscript.ts";

export namespace ScrapboxUserScript {

const scrapbox: Scrapbox;

}

code:test3.ts

import { ScrapboxUserScript } from "./namespace2.ts";

alert(ScrapboxUserScript.scrapbox.Project.name);

❌️build

The constant "scrapbox" must be initialized

$ deno check --remote -r=https://scrapbox.io https://scrapbox.io/api/code/takker/esbuildはexport_declareを解決してくれな/test3.ts

失敗する

declare global

✅️build

$ deno check --remote -r=https://scrapbox.io https://scrapbox.io/api/code/takker/esbuildはexport_declareを解決してくれな/test4.ts

成功する

ただし、declare globalはjsrで使えない

code:global.ts

import type { Scrapbox } from "https://raw.githubusercontent.com/scrapbox-jp/types/0.3.8/userscript.ts";

declare global {

const scrapbox: Scrapbox;

}

code:test4.ts

import "./global.ts";

alert(scrapbox.Project.name);

declare global & export

✅️build

$ deno check --remote -r=https://scrapbox.io https://scrapbox.io/api/code/takker/esbuildはexport_declareを解決してくれな/test5.ts

成功する

code:global2.ts

import type { Scrapbox } from "https://raw.githubusercontent.com/scrapbox-jp/types/0.3.8/userscript.ts";

declare global {

const scrapbox: Scrapbox;

}

const k = scrapbox;

export { k as scrapbox };

// cannnot export directly

// export { scrapbox };

code:test5.ts

import { scrapbox } from "./global2.ts";

alert(scrapbox.Project.name);

#export_declare

#declare

#2024-11-13 10:28:52 もう少しマシな方法がないか、調べ直している

#2023-01-26 10:43:37

#2021-11-15 13:22:03

#2021-09-18 11:01:14