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

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

使用的背景

在我们平常开发中，会在HTML文件中会放置一些所依赖的脚本，但在有些情况下，区分不同的环境下，而加载不同的脚本，或者相同的脚本而不同的版本，这就需要动态添加了

具体放置方法

可以动态的创建script元素，然后脚本链接赋值给src，但要注意一点，在加载完这个脚本之后才能进行下一步，否则放置的脚本可能没有生效或者是已经执行完而所依赖的脚本还在加载中。这是很重要的一点。
我所使用的框架是vit+react+ts进行开发的，因此我动态添加的script元素是放置在app.tsx中。具体代码如下：例 动态加载不同版本的微信sdk版本

import React from 'react';
import ReactDOM from 'react-dom';
import {
     BrowserRouter } from 'react-router-dom';
import {
     getEnv } from '@/utils';//区分微信环境和企业微信环境
import App from './app';

// 根据环境插入不同js-sdk，按目前文档企业微信插入1.2，微信插入1.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')
  );
}