javascript 中类似 Rails 的自动加载 - 允许依赖于 webpack 中的根包

Posted 2023-02-19

【中文标题】javascript 中类似 Rails 的自动加载 - 允许依赖于 webpack 中的根包

【英文标题】：Rails-like autoload in javascript - Allow dependency to require from root package in webpack

【发布时间】：2018-12-21 22:55:19

【问题描述】：

我正在编写一个框架包，我想让它能够从主项目 src/ 中自动 require 模块。如果您熟悉 Rails，这类似于它的自动加载功能。

因此，如果您在 Web 应用程序中遵循目录约定，例如 src/models/my-model.js，则框架可以单独要求 my-model 模块。作为 web 应用程序的依赖的框架，只需要知道关系的名称（即“todos”）即可要求模型（即。src/models/todo.js）

我尝试在我的网络应用程序 webpack 链 config.resolve.modules.add(path.resolve(__dirname, 'src')) 中添加我的网络应用程序 src 目录，但它似乎不适用于依赖项的搜索路径（不确定）所以我的框架库仍然无法在其中找到模块我的网络应用程序。

我也（拼命地）尝试将 require 从 Web 应用程序传递给依赖项，然后在依赖项代码中我调用 var MyModel = this.thePassedInRequireFn("./models/" + modelName)，但它出错了：

(`Uncaught Error: Cannot find module './models/my-model'
    at MyFramework.webpackEmptyContext

有人知道如何做到这一点吗？

如果解决方案可以独立于 webpack 的使用，那就再理想不过了，但是 webpack 的兼容性对我来说是最重要的。

【参考方案1】：

这是一个使用 require.context() 的 webpack 特定答案。

https://webpack.js.org/guides/dependency-management/#require-context

在网络应用程序中创建一个需求上下文。例如：

const requireModule = require.context('./models/', true);

然后将 requireModule 作为 Web 应用程序的依赖项传递给您的框架。

如果您的 Web 应用程序在文件 ./models/todo-item.js 中有一个模型，并且框架的模型名称为 todoItem，则框架可以只使用模型名称来要求它，如下所示：

let fileName = `./$kebabCase(modelName)`;
let module = this.requireModule(fileName).default;