Closed2022/10/17にクローズ5

ShopifyアプリのテンプレートをTypeScriptにする(Shopify CLI 3.x)

Shopifyアプリテンプレートのインストール
yarn create @shopify/app

Shopify CLI 3.x以降はフロントエンドとバックエンドが分離されているので、フロントエンド側からTypeScriptにする

バックエンド側のTypeScriptはこちらを参考にする

ES ModulesとTypeScriptの設定でかなりハマったけどこれで動いた

ts-nodeとnodemonの設定

nodemon.json

{
  "ignore": ["./frontend"],
  "execMap": {
    "ts": "node --loader ts-node/esm"
  },
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "lib": ["esnext"],
    "outDir": "dist",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "strict": true,
    "allowJs": false
  },
  "include": ["**/*.ts"],
  "exclude": ["dist", "node_modules", "frontend"]
}

package.json

{
 "scripts": {
    "debug": "node --inspect-brk index.js",
    "dev": "cross-env NODE_ENV=development nodemon index.ts",
    "serve": "cross-env NODE_ENV=production node dist/index.js",
    "build": "tsc",
  },
  "type": "module"
}

バックエンド側のESM,TypeScript,ts-node周りで詰まった際の参考

このスクラップは2022/10/17にクローズされました