TypeScript：如何优化 compile-bundle-reload 周期？

Question

我刚刚使用 React 和 Webpack 建立了一个简单的 TypeScript 项目，并且编辑-构建-重新加载-测试周期并不理想，因为我必须这样做

1. 使用npm run build:dev 手动重建
2. 等待tsc && webpack app.js -o app.bundle.js --mode=development 9 秒
3. 刷新浏览器。

各位程序员，你们使用什么技术来获得更快的工作流程？ （欢迎使用非 webpack 解决方案！）

Answer 1

您可以使用ts-loader（或awesome-typescript-loader）来允许 webpack 处理您的 typescript 文件。

另外，webpack 可以使用--watch 选项运行，这允许 webpack 监视文件更改并自动重建包

webpack 可以监视文件并在文件更改时重新编译。

在这种情况下，您的 build:dev 脚本将是 webpack app.js -o app.bundle.js --mode=development --watch（不运行 tsc）

PS。您还可以通过启用Hot Module Replacement 来加快刷新阶段，这样您就不需要手动重新加载页面（它甚至可以保留状态），但它需要对代码库进行一些更改（对于反应，推荐react-hot-loader )，尽管它还需要在您的 webpack 配置中使用 babel-loader。

Answer 2

我刚刚发现Parcel。这是迄今为止获得快速工作流程的最简单方法...

只需将<script src="app.tsx"></script> 引用添加到您的html 文件，然后运行parcel index.html（或其他）。包裹

1. 检查您是否有 package.json，如果没有，则为您创建一个
2. 安装 TypeScript（使用 --save-dev）如果这是您使用的语言
3. 如果您导入其中之一，则安装 React 或 Preact
4. 在 dist 文件夹中创建应用程序包及其依赖项
5. 在http://localhost:1234 为您的应用提供服务
6. 监视代码更改和重新编译（对于小型应用而言，不到 200 毫秒）
7. 通过热模块更换自动将更改推送到 Web 浏览器。