根据条件重新导出或动态导出对象

Question

这是简单的场景，我正在努力

apicontainer.js

import mockApi from './mock-api';
import realApi from './api';
function getApi() {
   return Cookies.get('isMock') ? mockApi: realApi;
}
let api = getApi();
export function changeApi() {
    api = getApi();
}
export default api

somepage.js

import api from './path-to/apicontainer';

应用程序加载后，如果 set/remove cookie 并调用 changeApi 方法，它会动态更改引用和 returns 正确的 api 或者是否有更好的解决方案？

Answer 1

是的，可以以这种方式使用（滥用）可变导出 - 如果导出在原始模块中被重新分配，它会在导入的任何地方重新分配，但实际上并不推荐这样做。最好让模块消耗和 API 进行适当的测试，以确定使用哪个 API（模拟或真实），并import said API 直接从源代码中导入。你真的不希望一个模块正在使用的变量被静默地重新分配（从那个模块的角度来看）——这还不清楚。

Answer 2

是的，导入的绑定只是对导出变量的引用。一种不导出值，一种使变量本身可用（尽管从外部只读）。

所以你可以做到

// apicontainer.js
import mockApi from './mock-api';
import realApi from './api';
function getApi() {
   return Cookies.get('isMock') ? mockApi: realApi;
}
let api = getApi();
export { api as default }
export function changeApi() {
    api = getApi();
}

// somepage.js
import api, {changeApi} from 'apicontainer'
changeApi();

Answer 3

是的，这是可能的，因为 ES6 模块导出绑定（实时连接）。阅读更多 here

apicontainer.js

import mockApi from './mock-api';
import realApi from './api';

function getApi() {
   return Cookies.get('isMock') ? mockApi: realApi;
}

export function changeApi() {
    api = getApi();
}
export let api = getApi();

somepage.js

import { api, changeApi }  from './path-to/apicontainer';
// whenever you change the condition (cookie in this case) 
changeApi(); // must call the `changeApi` to update the api reference value

详细了解 ES6 modules 的工作原理

根据条件重新导出或动态导出对象

re-export or dynamically export object based on condition

javascript

ecmascript-5

ecmascript-6

es6-modules