使用 Typescript 的 Shopify CLI

Question

我想通过从 shopify-app-cli 样板开始，测试使用 Typescript 构建一个 shopify 应用程序，该样板使用 Koa 作为服务器，使用 Nextjs 作为前端 React javascript。看https://github.com/Shopify/shopify-app-cli

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

变化：

• 所有文件扩展名均为.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它们并出现此错误：

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

这是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"
    ]
  }
}