404 当一个 JS 文件需要另一个没有 .js 扩展名的 JS 文件时

Question

当一个 JS 文件需要另一个 JS 文件并且在 require 语句中它没有指定 .js 扩展名时，我得到 404 Not Found。

我有一个名为 CalendarUtils.js 的文件，它需要来自 date-fns 的一些模块：

module.exports = factory(require("date-fns/add_days/index"));

我得到 404：

[1] 16.11.14 10:45:55 404 GET /lib/date-fns/add_days/index

如果我将 CalendarUtils.js 更改为：

module.exports = factory(require("date-fns/add_days/index.js"));

然后就可以了。

我想知道为什么会这样。这发生在几个地方，我宁愿不要在所有地方进行更改。我正在使用 Angular2。

我的 date-fns 索引文件：

gaurav:application gaurav$ tree build/lib/date-fns/add_days/
build/lib/date-fns/add_days/
└── index.js

如有需要，请随时向我提问。非常感谢。

angular2 的系统配置文件以了解文件位置：

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'lib/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'date-fns': 'npm:date-fns',
            'angular-calendar': 'npm:angular-calendar/dist/umd/angular-calendar.js',
            'angular-resizable-element': 'npm:angular-resizable-element/dist/umd/angular-resizable-element.js',
            'calendar-utils': 'npm:calendar-utils/dist/umd/calendarUtils.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

Answer 1

需要本地项目文件时，应使用相对路径（或绝对路径）：

module.exports = factory(require("./date-fns/add_days/index"));

否则，require()会将其视为模块名称，并寻找名为date-fns/add_days/index的已安装模块，显然会失败。

此外，在这种情况下，您可以省略 index.js 文件名，因为 require() 已经在您需要目录时查找 index.js：

module.exports = factory(require("./date-fns/add_days"));

希望对您有所帮助。

Answer 2

找到答案：

我需要在 systemjs 配置文件中指定 defaultExtension：

packages: {
        app: {
            main: './main.js',
            defaultExtension: 'js'
        },
        rxjs: {
            defaultExtension: 'js'
        },
        'date-fns': {
            defaultExtension: 'js'
        }
    }

404 当一个 JS 文件需要另一个没有 .js 扩展名的 JS 文件时

404 when a JS file requires another JS file without .js extension

javascript

node.js

http-status-code-404

angular