NodeJS 如何使用React Typescript应用程序和可运行的服务器端脚本设置项目

pn9klfpd  于 2022-11-03  发布在  Node.js
关注(0)|答案(1)|浏览(113)

我有一个包含React Typescript应用程序(使用“创建React应用程序”创建)的项目。我希望在此同一项目中有一个可运行的可执行脚本。应用程序和脚本都将只能在本地计算机上运行。
脚本和React应用程序依赖于相同的Typescript模块,该模块是一个名为algorithm.ts的ts文件。我希望能够在CLI中执行以下操作:

  • npm start--〉运行React应用
  • npm run myscript--〉运行脚本

我尝试了很多方法,最近的尝试是让脚本成为一个nodejs脚本,并在每次运行带有node的脚本之前将算法从Typescript编译为JS。然而,这在运行脚本时以以下错误结束:

$ npm run myscript

> tsc src/algorithm.ts && node src/myscript.js

file:///<path>/src/algorithm.js:2
exports.__esModule = true;
^

ReferenceError: exports is not defined
    at file:///<path>/src/algorithm.js:2:1
    at ModuleJob.run (internal/modules/esm/module_job.js:146:23)
    at async Loader.import (internal/modules/esm/loader.js:165:24)
    at async Object.loadESM (internal/process/esm_loader.js:68:5)

这也迫使脚本是JS而不是Typescript,这是我不喜欢的,但我想我可以接受。
以下是相关文件:

algorithm.ts

import { blabla } from "blabla";
...
export const function1 = ...
export const function2 = ...
...

ReactComponent.tsx

import { function1, function2 } from "./algorithm";
...

myscript.js

import * as algorithm from "algorithm.js"
...

包.json:

...
"type": "module",
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "myscript": "tsc src/algorithm.ts && node src/myscript.js"
  },
...

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}
kh212irz

kh212irz1#

我终于让它工作了。问题是tsc src/algorithm.ts命令使用CommonJS而不是ESModules编译文件。为了解决这个问题,我创建了第二个tsconfig.json文件:

{
  "compilerOptions": {
    "target": "es2016", 
    "module": "esnext", 
    "allowSyntheticDefaultImports": true, 
    "esModuleInterop": true, 
    "forceConsistentCasingInFileNames": true, 
    "strict": true, 
    "skipLibCheck": true 
  },
  "files": [
    "../src/algorithm.ts"
  ]
}

并将package.json中的脚本命令更改为使用此tsconfig文件"myscript": "tsc -p scripts/tsconfig.json && node src/myscript.js"
我仍然不知道这一切是否是矫枉过正,有一个更简单的方法来实现我想要的,所以不会标记为接受的答案。但至少它的工作!

相关问题