Question

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

apicontainer.js

range

somepage.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

加载应用程序后，如果设置/删除cookie并调用import api from './path-to/apicontainer';方法，它会动态更改引用并返回正确的api或是否有更好的解决方案？

Answer 1

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

所以你可以做到

// 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 2

是的，因为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如何运作

Answer 3

是的，可变导出可以这样使用（滥用） - 如果导出在原始模块中被重新分配，它将被重新分配到它导入的任何地方，但它不是真的推荐的。最好让模块消耗 API来进行正确的测试，以确定使用哪个API（模拟或真实），并直接从源导入所述API。你并不真的想要一个变量一个模块用于默默地重新分配（从该模块的角度来看） - 它不清楚。

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

3 个答案: