typeScript的安装编译

Posted 2023-05-18

参考技术A 搭建环境 - 安装 node.js
安装 typeScript

创建程序文件
.ts 文件 类似于js文件
.tsx 文件 提供的另一种文件类型 可以书写 JSX语法

编译
tsc [要编译的文件] --outFile [编译后保存文件]

直接命令行运行 ts 文件

1. tsc --init 创建tsconfig.json

2. 修改tsconfig.json文件，设置js文件输出路径 "outDir":"./js"

3. 设置vscode 监视任务

选择 监视 tsconfig.json，保存ts文件之后，vscode就会帮我们自动编译js

如何在 Heroku 安装后编译 Typescript？

【中文标题】如何在 Heroku 安装后编译 Typescript？

【英文标题】：How do I compile Typescript at Heroku postinstall?

【发布时间】：2018-08-04 23:23:09

【问题描述】：

我不想上传预编译的 dist 目录，而是想在服务器端编译 src。

这是我在 package.json 中的脚本：

"scripts": 
    "test": "echo \"No test specified\" && exit 0",
    "start": "node dist/app.js",
    "postinstall": "tsc"
  

以下是依赖项：

"dependencies": 
    "@types/express": "^4.11.1",
    "@types/pg": "^7.4.4",
    "@types/socket.io": "^1.4.31",
    "body-parser": "^1.18.2",
    "express": "^4.16.2",
    "pg": "^7.4.1",
    "socket.io": "^2.0.4",
    "tslint": "^5.9.1",
    "typescript": "^2.7.2"
  

由于'npm install会在安装过程中将node_modules/.bin文件夹添加到PATH环境变量中'，所以Heroku应该可以直接调用它。

但这是我得到的错误：

Building dependencies
       Installing node modules (package.json + package-lock)

       > bilgi-yarismasi@1.0.0 postinstall /tmp/build_afa42c7943d4b71d2b48a016ae3b9e50
       > tsc

       sh: 1: tsc: not found
       npm ERR! file sh
       npm ERR! code ELIFECYCLE
       npm ERR! errno ENOENT
       npm ERR! syscall spawn
       npm ERR! bilgi-yarismasi@1.0.0 postinstall: `tsc`
       npm ERR! spawn ENOENT
       npm ERR!
       npm ERR! Failed at the bilgi-yarismasi@1.0.0 postinstall script.
       npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

       npm ERR! A complete log of this run can be found in:
       npm ERR!     /tmp/npmcache.LTxbD/_logs/2018-02-25T10_36_06_374Z-debug.log
-----> Build failed

【问题讨论】：

也可以查看my answer

【参考方案1】：

Typescript 应该作为开发依赖安装

有web: node server.js 在你的 procfile 中

确保将 npm build 添加为安装后脚本

告诉npm typescript 安装在本地将修复 tsc not found 问题，因为 npm 试图在 heroku 上全局查找它。

像这样。

"tsc": "./node_modules/typescript/bin/tsc",
"build": "tsc",
"postinstall": "npm run build",

【讨论】：

这应该被标记为正确答案。绝对比当前标记的正确答案要好。

【参考方案2】：

只需将 typescript 作为依赖项安装即可

【讨论】：

Typescript 应作为开发依赖项添加。您只需要通过将其添加到脚本“tsc”来告诉 npm typescript 已在本地安装：“./node_modules/typescript/bin/tsc”，

【参考方案3】：

花了一些时间将我的简单 typescript create-react-app 部署到 Heroku。这对我有用。

package.json - 根本不需要后安装

在命令行中为您的应用程序安装 buildpack 跑步： heroku buildpacks：添加 zidizei/typescript heroku buildpacks：添加 heroku/nodejs

您也可以搜索 buildpacks 跑步： heroku buildpacks：搜索打字稿

我的服务器看起来像这样 (/root/server.js)

const express = require('express')
const app = express()
const PORT = process.env.PORT || 3000

app.use(express.static('build'));
app.listen(PORT, () => console.log(`Listening on port $PORT`))

package.json

 "scripts": 
    "start": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  

另外，在推送到 heroku 之前，请运行“npm run build”。

如果你要使用 webpack 开发服务器，我的解决方案将不起作用，它必须是自定义服务器，在我的情况下是 EXPRESS。

【讨论】：

我们使用 post-install 的全部目的是不要在每次推送 repo 时运行构建脚本。

【参考方案4】：

您需要从 npm 脚本调用 tsc。否则 Heroku 会尝试查找名为 tsc 的全局依赖项。

在 package.json 中创建一个新的 npm 脚本：

"tsc": "tsc"

现在将"postinstall": "tsc" 替换为：

"postinstall": "npm run tsc"

【讨论】：

没错！感谢您节省了我的一天，嗯一周。

它在 bitbucket 管道上不起作用，我该如何解决？

可能缺少 TSC。仅依赖于开发者？

@MarekUrbanowicz 但dev 依赖项应该仍然有效，文档说在安装和构建步骤期间会保留开发依赖项，或者我遗漏了什么？