Javascript RequireJS路径配置

Javascript RequireJS路径配置,javascript,requirejs,Javascript,Requirejs,我的RequireJS开发配置(在“index.html”文件中)是: <script src="require-2.1.5.min.js"></script> <script> require.config({ baseUrl: 'js', paths: { angular: 'libraries/angular-1.1.5.min', jquery: 'librarie

我的RequireJS开发配置(在“index.html”文件中)是:

<script src="require-2.1.5.min.js"></script>
<script>
    require.config({
        baseUrl: 'js',
        paths: {
            angular: 'libraries/angular-1.1.5.min',
            jquery: 'libraries/jquery-2.0.0.min',
            underscore: 'libraries/underscore-1.4.4.min',
            ...
            zeroclipboard: 'plugins/zeroclipboard-1.0.7.min',
            tablesorter: 'plugins/jquery.tablesorter-2.9.1.min',
            ...
        },
        shim: {
            'angular': {
                exports: 'angular'
            },
            'underscore': {
                exports: '_'
            }
        },
        packages: [
            {
                name: 'index',
                location: 'app/index',
                main: 'main'
            }
        ]
    });

    require(['index']);
</script>
那么,现在如何编写配置“路径”?我没有任何“libraries/angular-1.1.5.min.js”和其他路径

我的解决办法是写:

    paths: {
        angular: 'libraries',
        underscore: 'libraries'
    }
我将AngularJS和下划线关联到“libraries.js”文件,一切都很完美。(不需要jQuery和所有插件——它们已经是AMD模块了)

但这是写路径的正确方法吗?在我看来,我的解决方案有点肮脏,不是最佳实践解决方案

我的r.js构建过程:

({
baseUrl: 'scripts',
paths: {
    jquery: 'jquery-2.0.0.min',
    ...
    tablesorter: 'jquery.tablesorter-2.0.5.min',
    zeroclipboard: 'zeroclipboard-1.0.7.min'
},
name: 'foo/main',
exclude: [
    'angular',
    'jquery',
    ...
    'tablesorter',
    'zeroclipboard'
],
optimize: 'uglify',
out: 'production/js/foo.js'
})
UPD 1:

我想要的是:

www.mysite.com/about.html:

<script src="js/libraries.js"></script><-- jQuery (already AMD), AngularJS (not AMD), RequireJS, Underscore (not AMD) and other libraries already here, only 1 http request needed //-->
<script src="js/plugins.js"></script><-- all AMD //-->
<script>
    require.config({
        baseUrl: 'js',
        paths: {
            angular: WHAT I NEED TO WRITE HERE?,
            underscore: WHAT I NEED TO WRITE HERE?
        },
        shim: {
            'angular': {
                exports: 'angular'
            },
            'underscore': {
                exports: '_'
            }
        },
        packages: [
            {
                name: 'about',
                location: 'js',
                main: 'about'
            }
        ]
    });

    require(['about']); // will load "js/about.js"
</script>
www.mysite.com/about.html:
require.config({
baseUrl:'js',
路径:{
安格尔:我需要在这里写什么?,
下划线:我需要在这里写什么?
},
垫片:{
“有棱角的”:{
导出:“角度”
},
“下划线”:{
导出:'''
}
},
套餐:[
{
姓名:'关于',
位置:'js',
主要内容:“关于”
}
]
});
需要(['about']);//将加载“js/about.js”
UPD 2:

好的,关于“优先级”很清楚,所以我不需要第一个和第二个«script»标记(但我需要将“Require.js”和“libraries.js”分开),RequireJS将自动加载它们。但是对于“libraries.js”文件中的非AMD库应该怎么做呢


AngularJS和下划线JS是非AMD模块,这就是为什么我必须使用“垫片”,对吗?但是为了使“垫片”工作,我还需要使用“路径”,这样“垫片”就可以定位带垫片的模块,对吗?但我仍然只有一个文件--“libraries.js”,我无法在“path”选项中写入它…只是真的卡住了…

两种环境都应该使用相同的配置。您拥有的这个配置应该在外部文件中。当您使用r.j对其进行优化时,所有模块都已经存在于单个文件中,因此RequireJS将只使用它们而不加载它们。看起来您需要调整构建过程


查看我最近的相关信息。

要预加载公共库代码,应使用优先级配置选项。 您可以在
foo/main.js
文件中放入类似的内容

require.config({
    priority: ["libraries", "plugins"]
});
然后您的构建文件可能会如下所示。 库和插件文件应该包含一个define语句,该语句定义所有被视为通用/下载的依赖项

({
    baseUrl: 'scripts',
    paths: {
        jquery: 'jquery-2.0.0.min',
        ...
        tablesorter: 'jquery.tablesorter-2.0.5.min',
        zeroclipboard: 'zeroclipboard-1.0.7.min'
    },
    modules: [
        {
            name: 'foo/main'
            excludes: ...
        },
        {
            name: 'libraries'
        },
        {
            name: 'plugins'
        }
    ],
    optimize: 'uglify',
    out: 'production/js/foo.js'
})

添加了我的r.js构建脚本。即使在你的博客文章发表之后,我也不明白,如何在开发和生产中保持我的配置不变(在“index.html”文件中)。正如您所看到的,我从最终构建中排除了一些文件,将它们放在单独的文件(libraries.js)中,以便浏览器缓存它,不再为我的网站上的其他页面下载它。“libraries.js”包含AMD模块库(比如jQuery,它已经是AMD模块的核心)和非AMD库(比如AngularJS)。所以,在“libraries.js”文件中没有AngularJS的“define”。也许我应该手动将所有库设置为AMD模块?我的意思是,只需编辑Angular.js文件,并将其代码包装在“define('Angular',[],function(){…})”函数中?我想这些大模块从构建中排除是有意义的。您可能希望检查AngularJS与RequireJS一起使用的项目。«其想法是所有必需的引导代码都通过1文件加载»。例如,我的网站上有3个页面:关于、投资组合、联系人。我用我的模块制作了3个不同的文件(很多“定义”模块连接成一个文件):“about.js”、“portfolio.js”、“contacts.js”。第四个文件是“libraries+plugins.js”-因为我希望浏览器缓存这个文件,并且不再下载它。我负担不起将“libraries+plugins.js”代码放入每个“about.js”、“portfolio.js”、“contacts.js”文件中。是的,这很有意义。我认为您需要查看
priority
配置选项,以允许多层输出@artuska我编辑了我的问题,以便更好地反映require js中的优先级选项您不必添加这些额外的脚本标记,require.js可以而且应该为您加载这些标记。我下面关于优先选项的回答不清楚吗?你的回答很好,我只是在阅读你的更新之前做了一个更新:)
({
    baseUrl: 'scripts',
    paths: {
        jquery: 'jquery-2.0.0.min',
        ...
        tablesorter: 'jquery.tablesorter-2.0.5.min',
        zeroclipboard: 'zeroclipboard-1.0.7.min'
    },
    modules: [
        {
            name: 'foo/main'
            excludes: ...
        },
        {
            name: 'libraries'
        },
        {
            name: 'plugins'
        }
    ],
    optimize: 'uglify',
    out: 'production/js/foo.js'
})