导入/导出 Javascript 对象属性

Question

我支持一个相对复杂的遗留代码库，但我希望通过引入 Webpack 对其进行一些现代化改造，以便我们在 JS 中具有导入和导出功能。

我遇到的问题是我们使用一个名为 App 的全局对象，我们在其中根据页面定义和添加不同的属性。因此，例如我们有以下文件，我们在其中实例化应用程序（加载到所有页面上）：

app.js

const App = (() => {
    const obj = {
        Lib: {},
        Util: {},
        // etc
    }

    return obj;
})();

然后在另一个文件中我们添加到 App.Lib 只是为了需要它的特定页面：

lazyload.js

App.Lib.Lazyload = (() => {
    // lazyload logic
})();

我们只是在捆绑过程中连接文件，但显然这并不理想，因为 none 的文件不知道它之外发生了什么。

导出似乎只适用于顶级对象（定义对象的地方），所以我添加到别处的任何内容都无法再次导出。例如，如果我在 lazyload.js 的末尾添加 export default App.Lib.Lazyload; 然后尝试将其导入其他地方，它将不会导入 Lazyload 属性.

有什么方法可以在不进行重大重构的情况下让它工作吗？如果没有，您对最好的处理方式有什么建议吗？

Answer 1

我认为你不能在 JS 中导入 Object.properties。如果你想为需要它们的包捆绑特定的包（比如 Lazyload），你可以尝试：

//lazyload.js
export const LazyLoad = {
  //lazyload logic
}

然后在其他地方...

import {LazyLoad} from 'path/to/lazyload.js';

// assuming App has already been created/instantiated
App.Lib.Lazyload = LazyLoad;

使用导出默认值...

//lazyload.js
const LazyLoad = {};
export default LazyLoad;

然后...

import LazyLoad from 'path/to/lazyload.js';
App.Lib.LazyLoad = LazyLoad;

您可以在 MDN 上找到有关 Imports and Exports 的帮助。

Importing / exporting Javascript Object Properties