通过script标签引入js文件的方式怎么替换成import引入的方式?

Question

有个项目为了实现某个功能，我需要引入viz.js文件。
于是我将viz.js放在static目录下，然后在index.html中通过script标签引入。

let head = document.getElementsByTagName('head')[0];
createElement('script', head, { src: "static/resource/plugin/viz.js" })

function createElement(tag, target, attrs){
  let element = document.createElement(tag)
  if(attrs && typeof attrs === 'object'){
    for(let key in attrs){
      element.setAtrribute ? element.setAtrribute(key, attrs[key]) : element[key] = attrs[key]
    }
  }
  target.append(element)
}

该方式能让我项目正常运行，但是当我将项目封装成框架作为npm模块包发布，在测试中发现，因为新项目中的static是空文件夹，所以会导致该方式错误，引入的js不存在，报错unexpected token <
尝试的解决措施：
①把模块包中的static文件夹替换新项目，可行，但觉得这种方式不太合理，不方便
②修改script标签的引用路径为相对路径createElement('script', head, { src: "../../static/resource/plugin/viz.js" })但在依旧被浏览器识别为static/resource/plugin/viz.js，不可取
③通过npm方式引入viz，npm i viz.js然后在某处js文件中import 'viz'或是import Viz from 'viz'，都报错，在GitHub上viz.js的项目并没有找到使用说明，放弃该方式
④通过import的方式引入本地的viz.js文件或是将viz.js放在src文件夹中，报语法错误，提示有ts的语法，导致编译过程报错，无法启动项目
⑤修改script标签路径为https://cdn.bootcss.com/viz.j...，可行，但线上引入有些不保险

框架的项目地址：https://gitee.com/g2333/data_...

Answer 1

解决方案：采用措施②，修改script标签的引用路径为相对路径，当开发时路径为"static/resource/plugin/viz.js"，发布时路径为"./node_modules/modulecomponents/static/resource/plugin/viz.js"
代码如下：

MODULE_PATH为模块路径，开发环境下为'',发布成npm包时为'./node_modules/modulecomponents/'
createElement('script', head, { src: MODULE_PATH + "static/resource/plugin/viz.js" })