Вставить тег сценария после сгенерированного пакета в приложении ReactJS - PullRequest
Новая
       0

Вставить тег сценария после сгенерированного пакета в приложении ReactJS

0 голосов
/ 18 октября 2019

Я создаю приложение ReactJS, и необходимо добавить тег <script>. Я могу сделать это прямо в index.html, но это не решает мою проблему, потому что:

  1. Все сценарии должны быть внедрены прямо перед закрытием </body>.
  2. Мои дополнительныеТег <script> должен быть добавлен после сгенерированного пакета.

Какое решение может быть использовано для достижения этой цели?

Вот часть моей конфигурации Webpack: 

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: {
      app: [
          './src/main.jsx',
      ],
  },
  output: {
      path: path.resolve(__dirname, 'build'),
      filename: '[name].[hash].js',
      chunkFilename: '[name].[hash].js',
      publicPath: '/',
  },

  plugins: [
      new HtmlWebpackPlugin({
          title: 'App name',
          description: 'App description',
          template: './public/index.html',
          inject: true,
      }),
  ],
}

И index.html: 

<!doctype html>
<html lang="fi">
  <head>
      <meta charset="utf-8">
      <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
      <div id="app"></div>
      <!-- generated bundle will be injected here -->
      <!-- I need my extra script tags injected here -->
  </body>
</html>

Дополнительные сценарии не могут быть загружены асинхронно.

Спасибо!

Ответы [ 2 ]

1 голос
/ 18 октября 2019

Я бы порекомендовал добавить это через javascript внутри компонента, так как React проделал довольно хорошую работу по предотвращению правильного выполнения сценариев в противном случае. Например, в вашей функции componentDidMount в app.js 

componentDidMount() {
    const script = document.createElement("script");
    script.src = {url_to_your_script};
    script.async = true;
    document.body.appendChild(script);
}
0 голосов
/ 21 октября 2019

Ответ, данный @James Morrison, работает хорошо, я бы использовал этот подход в следующий раз, но он не решает мою текущую проблему. Я закончил тем, что внедрил сгенерированный пакет и CSS вручную в body: 

<% for(var i=0; i < htmlWebpackPlugin.files.js.length; i++) {%>
    <script type="text/javascript" src="<%= htmlWebpackPlugin.files.js[i] %>"></script>
<% } %>

и head соответственно: 

<% for(var i=0; i < htmlWebpackPlugin.files.css.length; i++) {%>
    <link type="text/css" rel="stylesheet" href="<%= htmlWebpackPlugin.files.css[i] %>">
<% } %>

Также опция inject в конфигурации веб-пакета установлена ​​наfalse: 

plugins: [
  new HtmlWebpackPlugin({
      title: 'App name',
      description: 'App description',
      template: './public/index.html',
      inject: false,
  }),
],
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...