可以使用 Webpack 一次导入一个模块并让方法可用于多个模块答案

【问题标题】：Possible To Import A Module Once And Have Method Available To Multiple Modules With Webpack可以使用 Webpack 一次导入一个模块并让方法可用于多个模块
【发布时间】：2020-01-24 02:19:02
【问题描述】：

我正在尝试学习如何在 webpack 中使用模块。我相信我现在明白，如果一个模块从不同的模块调用一个方法，它必须被导入。

我不明白的是，在多个模块调用另一个模块中定义的方法的情况下我该怎么办？

处理这种情况的正确方法是将所需的模块导入每个 js 模块文件吗？

isObject.js

const isObject = (a) => (!!a) && (a.constructor === Object);

export {isObject}

findNote.js

import {isObject} from './isObject';

const findNote = ( notes, id ) => {
    return isObject( notes.findIndex(function( note ){
        return note.id === id;
    }) );
}

export {findNote}

filterNotes.js

import {isObject} from './isObject';

const filterNotes = ( notes, filter ) => {
    return isObject( notes.filter(function( note ){
        return note.title.toLowerCase().includes( filter.toLowerCase() ) );
    });
}

export {filterNotes}

【问题讨论】：

标签： javascript node.js webpack ecmascript-6 node-modules

【解决方案1】：

我猜你是新人。

Node.js 将是 cache modules。每个模块只加载一次

【讨论】：

好的，所以每个模块只加载一次。我注意到，如果我的模块调用了我必须导入的方法，则必须将其导入到进行调用的每个模块中，否则在运行 webpack 后代码将失败。有没有办法解决这个问题？
我不太明白。你能做一个我们可以讨论的示例项目吗？

【解决方案2】：

webpack 是一个脚本打包器。它具有“入口点”的概念，并为每个入口点构建一个或多个脚本包。

因此，如果您将findNote.js 设为入口点，或者如果存在可导入（直接或间接）findNote.js 的现有入口点，则包括isObject.js 在内的所有依赖项都将包含在此捆绑包中。

filterNotes.js 也是如此。如果您将其设置为另一个入口点，则其代码及其依赖项（包括 isObject.js）将包含在该入口点的另一个包中。

所以isObject.js 将包含在几个捆绑包中。这可以通过一些优化来避免。

【讨论】：

所以，文件 app.js 是入口点，app.js 导入所有 3 个 JS 模块。因为 findNote.js 和 filterNotes.js 都 import isObject.js 是在最终包中重复的所有代码？
@mcbeav app.js、findNote.js、filterNotes.js 和 isObject.js 这 4 个模块将包含在包中。