WMR –适用于现代Web应用程序的微型多合一开发工具

微型的多合一开发工具，用于现代Web应用程序，在一个2mb的文件中，没有任何依赖关系。

💁如果希望为您设置ESLint，请在命令中添加--eslint。注意：这将使用150mb的磁盘空间。

虽然最好使用上面的快速启动方法，但WMR也适合那些也想从头开始的人。

实际上，没有什么特定于WMR的设置-此处的步骤实质上是您使用简单HTTP服务器所要做的。

2.接下来，您将要创建一个public / index.html文件。您可以使用此示例，尽管此HTML文件确实没有什么特别之处。只需通过添加type =＆＃34; module＆＃34;来确保您的脚本是ES模块：

💁为什么公开/？将您的代码和资产保持在公共状态/可以防止浏览器访问诸如node_modules和package.json之类的文件。它还可以帮助您将面向Web的代码与其他内容（例如构建脚本和输出文件）分开。WMR自动检测您的public /目录，或者您可以通过将--public src传递给任何命令来指定自己的目录。

3.要进行测试，请创建该index.js文件并向其中添加一个简单的Preact组件：

4.现在，我们可以将一些脚本添加到package.json中。有一个用于启动开发服务器，另一个用于创建生产版本。第三个脚本用于该生产版本，以方便进行本地测试：

5.一切准备就绪！作为额外的步骤，如果您希望WMR在生产构建期间将应用程序预呈现为静态HTML，则将render（）替换为preact-iso：

-从＆＃39; preact＆＃39 ;;导入{render} +从preact-iso / hydrate＆＃39; function App（）{返回＆lt; h1＆gt; Hello World！＆lt; / h1＆gt;}中导入水合物-render（＆lt; App /＆gt ;, document.body ）; +水合物（＆lt; App /＆gt;）; +导出异步函数prerender（data）{+ //我们使用动态导入来防止将其加载到浏览器中：+ return（await import（＆＃39; preact-iso / prerender＆＃39;））。default（＆lt ; App {... data} /＆gt;）; +}

WMR支持wmr.config.js（或wmr.config.mjs）配置文件。您可以导出默认配置功能，也可以为每个start，build和serve命令导出单个配置功能：

// wmr.config.mjs从＆＃39; @ rollup / plugin-xyz＆＃39;导入someRollupPlugin ; / ** @param {import（＆＃39; wmr＆＃39;）。Options} config * /导出默认的异步函数（config）{if（config。mode ===＆＃39; build＆＃39;）{config 。插件。 push（//添加任何Rollup插件：someRollupPlugin（））； } if（config。mode ===＆＃39; serve＆＃39;）{config。中间件。推（//添加任何Polka中间件：函数myPolkaMiddleware（req，res，next）{res。setHeader（＆＃39; X-Foo＆＃39;，＆＃39; bar＆＃39;）; next（）;}） ; }} // //导出异步功能start（config）{//相当于`config.mode ===＆＃39; start＆＃39;`} export异步功能build（config）{//相当于`config.mode ===＆＃39; build＆＃39;`}导出异步函数serve（config）{//相当于`config.mode ===＆＃39; serve＆＃39;`}

git clone [email protected]：preactjs / wmr.git cd wmrnpm我＃运行演示（不编译）npm运行演示＃构建并为prodnpm提供演示运行demo：prod＆amp; npm run demo：serve＃构建单文件CLI：npm run build