typescript - 使用 Typescript 的 Shopify CLI

Question

我想测试使用 Typescript 构建一个 shopify 应用程序，方法是从 shopify-app-cli 样板文件开始，它使用 Koa 作为服务器，使用 Nextjs 作为前端 react javascript。参见 https://github.com/Shopify/shopify-app-cli

我在为服务器和 nextjs 前端代码编译 typescript 代码时遇到问题。

变化:

• 所有文件扩展名为 .tsx 或 .ts。而不是 .js

• 在 package.json 中，将“dev”脚本更改为使用 ts-node 而不是使用 nodemon

之前

"dev": "NODE_ENV=development nodemon ./server/index.js --watch ./server/index.js",

之后

"dev": "NODE_ENV=development ts-node server/server.ts",

我可以得到它来编译 server.ts 文件，但是如果我更改 nextjs 文件 pages/_app.js 和 pages/index.js 到 .tsx 它找不到它们并出现此错误:

[ event ] client pings, but there's no entry for page: /

这是设置好的tsconfig.json文件。

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react"
  },
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

也是 server.ts 的要点，https://gist.github.com/azrielh/73ac202fcce5ce32f19488e4ef5df263.js

Answer 1

我基本上可以使用您描述的设置。

1. 我使用 shopify-cli 1.5 版构建了一个新应用
2. 我创建了您正在使用的 tsconfig.json 文件
3. 我将 _app.js 重命名为 _app.tsx，将 pages/index.js 重命名为 pages/index.tsx，并将 server.js 重命名为 server.tsx
4. 我按照您指定的方式替换了 package.json 中的 dev 命令

它全部按预期运行、编译并查看 TSX 页面。

这是我的 package.json:

{
  "name": "shopify-app-node",
  "version": "1.0.0",
  "description": "Shopify's node app for CLI tool",
  "scripts": {
    "test": "jest",
    "oldDev": "cross-env NODE_ENV=development nodemon ./server/index.js --watch ./server/index.js",
    "dev": "NODE_ENV=development ts-node server/server.ts",
    "build": "NEXT_TELEMETRY_DISABLED=1 next build",
    "start": "cross-env NODE_ENV=production node ./server/index.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Shopify/shopify-app-node.git"
  },
  "author": "Shopify Inc.",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/shopify/shopify-app-node/issues"
  },
  "dependencies": {
    "@babel/core": "7.12.3",
    "@babel/polyfill": "^7.6.0",
    "@babel/preset-env": "^7.6.2",
    "@babel/register": "^7.6.2",
    "@shopify/app-bridge-react": "^1.15.0",
    "@shopify/app-cli-node-generator-helper": "^1.1.2",
    "@shopify/koa-shopify-auth": "^3.2.0",
    "@shopify/koa-shopify-graphql-proxy": "^4.0.2",
    "@shopify/koa-shopify-webhooks": "^2.5.3",
    "@shopify/polaris": "^5.3.1",
    "@zeit/next-css": "^1.0.1",
    "apollo-boost": "^0.4.4",
    "cross-env": "^7.0.2",
    "dotenv": "^8.2.0",
    "graphql": "^14.5.8",
    "isomorphic-fetch": "^3.0.0",
    "koa": "^2.8.2",
    "koa-router": "^10.0.0",
    "koa-session": "^6.1.0",
    "lodash": "^4.17.20",
    "next": "^10.0.0",
    "next-env": "^1.1.0",
    "node-fetch": "^2.6.1",
    "react": "^16.10.1",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.10.1",
    "ts-node": "^9.1.1"
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.6.2",
    "@babel/preset-stage-3": "^7.0.0",
    "@types/lodash": "^4.14.165",
    "@types/node": "^12.19.5",
    "@types/react": "^16.9.56",
    "@types/react-dom": "^16.9.8",
    "@typescript-eslint/eslint-plugin": "^4.11.1",
    "@typescript-eslint/parser": "^4.11.1",
    "babel-jest": "26.6.2",
    "babel-register": "^6.26.0",
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.5",
    "eslint": "^7.16.0",
    "husky": "^4.0.7",
    "jest": "26.6.2",
    "lint-staged": "^10.0.1",
    "nodemon": "^2.0.0",
    "prettier": "^2.1.2",
    "react-addons-test-utils": "15.6.2",
    "react-test-renderer": "16.14.0",
    "tsmon": "^0.7.3",
    "typescript": "^4.1.3"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,css,json,md}": [
      "prettier --write"
    ]
  }
}