如何使用 CLI 将带有节点模块的 TypeScript Web 应用程序编译成一个 JavaScript 文件？ [关闭]

Posted 2023-03-07

【中文标题】如何使用 CLI 将带有节点模块的 TypeScript Web 应用程序编译成一个 JavaScript 文件？ [关闭]

【英文标题】：How to compile TypeScript web app with node modules into one JavaScript file using CLI? [closed]

【发布时间】：2021-03-08 17:30:54

【问题描述】：

使用节点模块设置 TypeScript Web 应用程序的最简单和最快的方法是什么，该应用程序编译成一个可以从 html 调用的 javascript 文件？

例如，如果我有以下项目结构：

├── node_modules
│   └── mathjs
│   └── (dependencies, etc.)
├── public
│   └── index.html
│   └── app.js
├── src
│   └── app.ts
├── package-lock.json
└── package.json

app.ts 包含以下代码和节点模块并输入导入：

import math from "mathjs";
import  Matrix  from "mathjs";

const point: Matrix = math.matrix([ +1, +1, +1 ]);
// etc...

我怎样才能使app.ts 及其所有依赖项编译到public 目录中的单个文件app.js 中，这样，它可以包含在@ 中body 标记的底部987654330@ 并在浏览器中运行？

<script type="module" src="/app.js"></script>

换句话说，我可以使用哪些 CLI 工具来编译这个 Web 项目？

我花了几个小时试图研究并得到一些工作（没有直接从node_modules 复制和粘贴），但没有得到任何工作。任何帮助将不胜感激！

编辑：Parcel 正是我想要的。

【问题讨论】：

使用 webpack 怎么样？ webpack.js.org/guides/getting-started

【参考方案1】：

仅使用 typescript 编译器可以做的最简单的事情是在 tsconfig.json 中使用系统或 amd 模块，并使用 outFile（此选项仅适用于系统或 amd 模块）选项来连接所有将您的应用程序的文件打包成一个捆绑包，您以后可以使用 system.js 之类的东西。你可以阅读更多关于它的信息here。

我只想注意，使用标准 tsconfig 配置，node_module 依赖项不会包含在 outFile 配置选项包中，您必须配置 systemJS 以单独加载它们。也许也可以包含它们，但我还没有使用 tsc 选项来实现类似的东西，但你可以尝试。如果你成功了，请告诉我。

顺便说一句，如果您决定采用这种方法并且不使用 webpack 或 rollup 之类的外部模块捆绑器，我建议您不要使用 outFile 选项将所有内容捆绑到一个文件中，因为前一段时间我正在努力制作systemJS 使用 out 包，但是当我使用单独的文件时，一切正常。