TypeScript：如何优化compile-bundle-reload循环？

Question

我刚用React＆amp; amp;设置了一个简单的TypeScript项目。 Webpack和编辑 - 构建 - 重载 - 测试周期并不理想，因为我必须

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处理您的打字稿文件。

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

  

webpack可以随时观看文件并重新编译。

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

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

Answer 2

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

只需在html文件中添加string NewContent = String.Empty; // Content without selected line // Assembly new content foreach(string Line in Lines) NewContent += Line + "\n"; //Or // Assembly new content foreach(string Line in Lines) NewContent += String.Format("{0}{1}", Line, "\n"); 引用，然后运行<script src="app.tsx"></script>（或其他）。包裹

1. 检查您是否有package.json，如果没有，请为您创建一个
2. 安装TypeScript（使用parcel index.html），如果这是您正在使用的语言
3. 如果您导入其中一个
，则安装React或Preact
4. 在--save-dev文件夹
中创建一个包含其依赖项的应用程序包
5. 在http://localhost:1234
上投放您的应用
6. 观察代码更改和重新编译（对于一个小应用程序，不到200毫秒）
7. 使用热模块替换自动将更改推送到Web浏览器。