TypeScript：如何优化编译-捆绑-重新加载周期？

Question

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

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

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

Answer 1

您可以使用 ts-loader (or awesome-typescript-loader) 让 webpack 处理您的 typescript 文件。

此外，webpack 可以 运行 带有 --watch 选项，这允许 webpack 监视文件更改并自动重建 bundle

webpack can watch files and recompile whenever they change.

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

PS。您还可以通过启用 Hot Module Replacement so you don't need to reload the page manually (it can even preserve the state), but it would require some changes in the codebase (for react, react-hot-loader 来加快刷新阶段），尽管它还需要在您的 webpack 配置中使用 babel-loader。

Answer 2

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

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

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