Рендеринг компонента прямо в шаблон - PullRequest
Новая
       6

Рендеринг компонента прямо в шаблон

0 голосов
/ 27 августа 2018

У меня есть компонент 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-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 внутри модуля, работая в режиме разработки? Можно ли вызвать React Renderer в Webpack?

Я бы хотел избежать условного рендеринга, используя также переменную process узла.

1 Ответ

0 голосов
/ 27 августа 2018

Посмотрите на HtmlWebpackIncludeAssetsPlugin , он позволяет добавить ресурс в html-файл, моя идея заключается в добавлении js-файла, который будет вызывать ReactDom.render метод внутри него. 

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