javascript - 手动请求模块与使用 browserify 动态调用模块有何不同？

Question

抱歉，帖子标题很尴尬，但这是一个非常奇怪的情况。在我的项目中，我有一个像这样的文件夹结构:

/filters
     index.js
     [...]
/controllers
     index.js
     [...]
app.js

app.js 基本上是我的应用程序的入口点，我认为如果我可以通过 require() 自动加载这些目录的内容，那就太酷了该目录以及每个目录中的 index.js 负责加载需要加载的任何内容。

但是我遇到了一个我不明白的问题。因为我故意迟钝(这是一个学习/实验练习)，所以我决定尝试尽可能保持干燥，所以我尝试了这么大的代码来处理模块加载:

'use strict';

var customModules = [
    'controllers',
    'filters'
];

//require('./controllers');
//require('./filters');

for (var i in customModules) {
    if (customModules.hasOwnProperty(i)) {
        require('./' + customModules[i]);
    }
}

var nativeModules = [
    'ngSanitize'
];

angular.module('app', customModules.concat(nativeModules));

我计划将其提取到它自己的模块中，但它可以用于演示。由于某种原因，此代码抛出此异常:

Uncaught Error: Cannot find module './controllers'

但是当我使用静态字符串加载它时

require('./controllers');

没问题，一切正常，我的示例应用程序的行为符合预期。

Answer 1

查看 Browserify Handbook在how browserify works (强调我的):

Browserify starts at the entry point files that you give it and searches for any require() calls it finds using static analysis of the source code's abstract syntax tree.

For every require() call with a string in it, browserify resolves those module strings to file paths and then searches those file paths for require() calls recursively until the entire dependency graph is visited.

底线:依赖项必须静态声明；您的涉及动态创建的 require() 调用的代码无法工作(尽管原则上是个好主意)。

您可以使用服务器端或构建时技术获得类似的结果。