如何将preact-cli生成的应用挂载到自定义div id='root'？

我之前也碰到过这个需求，preact-cli确实没有专门的配置项来指定挂载目标，但其实只需要修改两处代码就能轻松实现，步骤如下：

• 第一步：修改入口文件的挂载目标
  找到项目根目录下src文件夹里的入口文件（通常是index.js或index.jsx），里面会有一行类似这样的代码：

  render(<App />, document.body);
  // 或者是 render(<App />, document.getElementById('app'));
  

  把它改成指向你自定义的root元素：

  import { render } from 'preact';
  import App from './App';
  
  // 定位到id为root的DOM元素
  const rootContainer = document.getElementById('root');
  render(<App />, rootContainer);
  

  如果你担心页面里没有这个元素，可以加个兜底逻辑，自动创建并添加到body里：

  const rootContainer = document.getElementById('root') || (() => {
    const div = document.createElement('div');
    div.id = 'root';
    document.body.appendChild(div);
    return div;
  })();
  render(<App />, rootContainer);
  

• 第二步：确保HTML模板里存在目标div
  打开src/template.html，找到原来的挂载容器（一般是<div id="app"></div>），把它改成：

  <div id="root"></div>
  

  当然，如果你用了上面的兜底逻辑，这一步可以跳过，但更推荐提前在模板里写好，避免额外的DOM操作开销。

这样修改后，重新启动项目，preact应用就会自动挂载到你指定的id="root"的div里了。

内容的提问来源于stack exchange，提问作者Tarik Fojnica