时间戳

首页 > 解决方案 > 将组件直接渲染到模板中

javascript - 将组件直接渲染到模板中

问题描述

我有一个 React 组件，我正在使用 Webpack 构建它。组件是从 导出的index.js，它是entry模块中的文件：

// packages/tnetennba/index.js

class Tnetennba extends React.Component {
  render() {
    return (
      <div>good morning, that's a nice tnetennba</div>
    )
  }
}

export default Tnetennba

我的 webpack 配置与模块位于不同的目录中（我使用的是单存储库），因此模块本身没有任何构建配置文件或模板可供使用webpack-dev-server。

// packages/tnetennba/package.json
{
  "name": "tnetennba",
  "version": "0.0.1",
  "main": "dist/index.js",
  "scripts": {
    "start": "webpack-dev-server --config ../config/webpack.dev.js --open",
    "build": "webpack --config ../config/webpack.build.js"
  }
}

但是，我不能在开发模式下使用组件，我可以使用 HtmlWebpackPlugin 来实现：

// packages/config/webpack.dev.js
module.exports = merge(common, {
  mode: 'development',
  ...
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: '../config/index.html' // <-- this path is relative, becuase webpack will be called from packages/tnetennba directory.
    })
  ]
})

但是，我必须将ReactDOM.render函数调用放在我的模块中index.js，以将组件渲染到模板中：

//...
export default Tnetennba

ReactDOM.render(<Tnetennba />, document.getElementById('root')) // <-- This shouldn't be here.

问题：有没有办法在开发模式下工作时避免render在模块内部调用？是否可以在 webpack 中调用 React 渲染器？

我也想避免使用节点的process变量进行条件渲染。

标签： javascriptreactjswebpackwebpack-dev-server

解决方案

查看HtmlWebpackIncludeAssetsPlugin，它允许您将资产添加到 html 文件中，我的想法是添加一个将ReactDom.render在其中调用方法的 js 文件。

new HtmlWebpackPlugin(),
new HtmlWebpackIncludeAssetsPlugin({
  assets: [
    { path: 'path/to/bootstrap.js', type: 'js' }
  ]
})

推荐阅读