How to dynamically add script dependent scripts

如何动态添加script依赖的脚本

使用的背景

在我们平常开发中,会在HTMLFile will be placed some rely on the script,但在有些情况下,Distinguish between different environment,While loading different script,Or the same script and different versions of,It's need to dynamically add

The concrete placement method

可以动态的创建script元素,The script then link tosrc,但要注意一点,After finish loading the script to the next step,Or placed script may not take effect or has been performed and rely on the script is still in loading.这是很重要的一点.
我所使用的框架是vit+react+ts进行开发的,So I added dynamicallyscriptElement is placed in theapp.tsx中.具体代码如下：例 Dynamic loading different versions of WeChatsdk版本

import React from 'react';
import ReactDOM from 'react-dom';
import {
     BrowserRouter } from 'react-router-dom';
import {
     getEnv } from '@/utils';//Distinguish between WeChat environment and enterprise WeChat environment
import App from './app';

// According to different environment insertjs-sdk,According to the current document enterprise WeChat insert1.2,WeChat insert1.6
const script = document.createElement('script');
// script.crossOrigin = 'anonymous';
if (getEnv() === 'qywx') {
    
  script.src = 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js';
  script.onerror = () => {
    
    window.$log('qy-wx-sdk:loadError');
  };
} else {
    
  script.src = 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js';
  script.onerror = () => {
    
    window.$log('wx-sdk:loadError');
  };
}
script.onload = rcInit;//加载完script后,渲染页面dom
document.head.appendChild(script);
function rcInit() {
    
  ReactDOM.render(
    <BrowserRouter basename="/admin-app">
      <App />
    </BrowserRouter>,
    document.getElementById('root')
  );
}