ES6模块并兼容非模块js

Question

我想知道是否有一些方法可以制作非模块 JS，例如：

// my-api.js
function MyAPI() {
   this.classVar = null
}

MyAPI.prototype.myFunction = function() {
  this.classVar = {something: 3}
}

兼容ES6模块。我尝试将此代码放入

my-api.js

：

if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
  module.exports = MyAPI
}

但是当我尝试导入时，无论是使用

The requested module '/static/my-api.js' does not provide an export named 'MyAPI'

还是

import MyAPI from '<url-of-backend>/static/my-api.js

，我都会得到 

import { MyAPI } from <url-of-backend>/static/my-api.js

我偶然发现了https://stackoverflow.com/a/58615189/8204956这个响应，但它需要另一个间接级别。

我正在尝试使非模块 JS 与 es6 模块兼容，以便在大型代码库中顺利迁移到模块。

Answer 1

如果您这样做是为了过渡到 ES6 模块，一个想法是将您的 API 放入

globalThis

，通过这样做，您使用什么模块加载器并不重要。

例如。

globalThis.myAPI = ......

然后你使用什么模块加载器并不重要 ->

import "./my-api"

<script src="./my-api"/>

require("./my-api")

等等 ->

const api = new globalThis.MyAPI(); //this will work no matter what loader

需要注意的是，请确保您不使用全局中已经存在的函数，

MyAPI

应该没问题，但执行

globalThis.atob

等可能会导致问题。

然后当您过渡到使用 ES6 时，您可以逐渐删除它们。