Динамически добавить переменную во внешний скрипт js с помощью NextJS - PullRequest
Новая
       54

Динамически добавить переменную во внешний скрипт js с помощью NextJS

0 голосов
/ 04 февраля 2020

У меня есть этот внешний скрипт hotjar внутри /static/js моего nextjs приложения. 

(function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:<SITEID>,hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');

Я импортировал этот файл в свое приложение из раздела Head в _document.js, вот так : <script src={'/js/hotjar.js'} ></script>

Проблема: Приложение My Next js в настоящее время работает в промежуточной и рабочей среде, и я хотел бы добавить сценарий для обоих. Единственная динамическая c часть скрипта выше - это SITEID значение здесь h._hjSettings={hjid:<SITEID>,hjsv:6};. Как я могу добавить разные SITEID s для разных сред внутри файла конфигурации и динамически изменить это значение, так как этот скрипт выполняется на стороне клиента?

1 Ответ

2 голосов
/ 04 февраля 2020

Редактировать :
Вы можете использовать Reaction-Hotjar и просто 

import { hotjar } from 'react-hotjar'; 
hotjar.initialize(hjid, hjsv);// Hotjar ID  and Hotjar Snippet Version

В противном случае у вас есть 2 варианта:

Опция 1
сначала убедитесь, что ваш стартовый скрипт package.json установит переменную окружения, что-то вроде этого: 

  "scripts": {
    ...
    "start": "cross-env NODE_ENV=production node server.js",
    ...
  }

Затем создайте 2 горячих сценария, скажем, /js/prod_hotjar.js и /js/staging_hotjar.js с соответствующими SITEID внутри.
Затем в вашем _document.js определите текущую среду и визуализируйте соответствующий скрипт примерно так: 

import Document, { Html, Head, Main, NextScript } from 'next/document'
const prod= process.env.NODE_ENV === 'production'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    const url = prod ?  "/js/prod_hotjar.js" : "/js/staging_hotjar.js"
    return (
      <Html>
        <Head>
        <script src={url} ></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Опция 2
Используйте dangerouslySetInnerHTML с чем-то вроде этого: 

import Document, { Html, Head, Main, NextScript } from 'next/document'
const dev = process.env.NODE_ENV === 'production'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    const SITEID = prod ?  1234 :  4567 // or any other logic
    return (
      <Html>
        <Head>
        <script dangerouslySetInnerHTML={{__html: `(function(h,o,t,j,a,r){
        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
        h._hjSettings={hjid:${SITEID},hjsv:6};
        a=o.getElementsByTagName('head')[0];
        r=o.createElement('script');r.async=1;
        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
        a.appendChild(r);
       })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`}} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument
...