1

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

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

应用程序.js

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

    return obj;
})();

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

懒加载.js

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

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

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

有没有办法在没有重大重构的情况下让它工作？如果没有，您对处理它的最佳方法有什么建议吗？

4

1 回答 1

0

我不认为你可以在 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上找到有关导入和导出的帮助。

于 2021-10-08T02:12:57.967 回答