Babel如何在没有捆绑器的情况下使用,但具有类似于webpack的开发体验？

Question

我正在尝试使用ES6模块构建一个没有捆绑的新项目.我仍然想用babel-7将TypeScript和JSX翻译成JS.我发现很难弄清楚如何为它设置开发服务器.我找不到任何类似于webpack-dev-server(热模块重新加载,浏览器同步,文件监视器)的"babel-dev-server" .

一种可能性是使用浏览器同步作为静态服务器,例如并行dist运行babel src --out-dir dist --watch.但这不包括热重载,对我来说似乎有些笨拙.此外,如果您可以为JS文件提供哈希以更好地控制缓存,那么它对构建和开发步骤仍然有用.或者我可以配置像webpack这样的构建工具,以便它不执行捆绑但仍然执行一些转换(比如将哈希放在导入的文件名中)？

更新(10/2018):为了能够做我所描述的,目前似乎没有"标准方式".它提供了开发新构建工具或定制/开发现有构建工具的机会.它应该类似于webpack和webpack-dev-server(包括用于热重新加载的简单设置),但不应该再捆绑文件.可以定制webpack来完成所需的操作,在这种情况下,一个工作示例设置可以很好地说明开发和构建周期.我目前没有时间这样做,但如果有人建立或想要建立第一次尝试,欢迎他们将他们的进展添加为评论或回答.

Answer 1

使用最新版本的Snowpack（以前的@pika/web），这现在应该可以实现！

从他们的网站：

TL;DR - 使用 Snowpack，您可以构建现代 Web 应用程序（使用 React、Vue 等），而无需捆绑程序（如 Webpack、Parcel、Rollup）。每次点击“保存”时，不再需要等待捆绑程序重建您的网站。相反，每个更改都会立即反映在浏览器中。

以及他们的“工作原理”：

1. 无需捆绑每个更改，只需在 npm 安装后立即运行 Snowpack 一次即可。
2. Snowpack 会将您的依赖项作为单个 JS 文件重新安装到新的 web_modules/ 目录中。它永远不会触及您的源代码。
3. 编写代码，通过 ESM 导入导入这些依赖项，然后在浏览器中运行它们。
4. 跳过捆绑步骤，并在点击“保存”后立即在浏览器中查看反映的更改。
5. 继续使用您最喜欢的 Web 框架和构建工具！支持 Babel 和 TypeScript。

检查https://www.snowpack.dev/了解更多信息，他们的文档做得很好，看起来非常有前途！