javascript RequireJS 路径配置

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16825405/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 06:07:54  来源:igfitidea点击:

RequireJS paths config

javascriptrequirejs

提问by artuska

My development config (in "index.html" file) for RequireJS is:

我的 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>

But on production I have only 2 concatenated files for libraries and plugins:

但是在生产中,我只有 2 个用于库和插件的连接文件:

js/libraries.js // all jQuery, AngularJS, RequireJS, Underscore and other libraries concatenated
js/plugins.js // all plugins (already an AMD modules, no need for "shim" config) concatenated

So, how do I write my config "paths" now? I don't have any 'libraries/angular-1.1.5.min.js'and other paths.

那么,我现在如何编写我的配置“路径”?我没有任何“libraries/angular-1.1.5.min.js”和其他路径。

My solution is to write:

我的解决办法是写:

    paths: {
        angular: 'libraries',
        underscore: 'libraries'
    }

I associate AngularJS and Underscore to 'libraries.js'file and everything works perfect. (No need for jQuery and all plugins — they are already an AMD modules).

我将 AngularJS 和 Underscore 与“libraries.js”文件相关联,一切正常。(不需要 jQuery 和所有插件——它们已经是 AMD 模块)。

But is that a right way to write paths? My solution seems to me kinda dirty workaround, not the best practices solution.

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

My r.js build process:

我的 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:

更新 1:

What I want:

我想要的是:

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>

UPD 2:

更新 2:

Ok, it is clear about "priority", so, I don't need for first and second ?script? tags (but I need to separate "Require.js" from "libraries.js") — RequireJS will load them automatically. But what should be done with non-AMD libraries in "libraries.js" file?

好的,“优先级”很清楚,所以,我不需要第一个和第二个?脚本?标签(但我需要将“Require.js”与“libraries.js”分开)——RequireJS 会自动加载它们。但是应该如何处理“libraries.js”文件中的非 AMD 库?

AngularJS and UnderscoreJS are non-AMD modules, that is why I have to use "shim", right? But to make "shim" work, I need to use "paths" also, so "shim" can locate shimmed modules, right? But I still have only 1 file — "libraries.js" and I cannot write it in "path" option… Just really stuck…

AngularJS 和 UnderscoreJS 是非 AMD 模块,这就是为什么我必须使用“垫片”,对吗?但是为了使“shim”起作用,我还需要使用“paths”,所以“shim”可以定位经过垫片处理的模块,对吗?但我仍然只有 1 个文件——“libraries.js”,我不能把它写在“路径”选项中……真的卡住了……

采纳答案by Willem D'Haeseleer

In order to have common library code preloaded you should use the priority config option. you could put something like this in your foo/main.jsfile

为了预加载公共库代码,您应该使用优先级配置选项。你可以把这样的东西放在你的foo/main.js文件中

require.config({
    priority: ["libraries", "plugins"]
});

And then your build file could look like this. The libraries and plugins file should contains a define statement that define all dependencies that are considered general / download once.

然后你的构建文件可能看起来像这样。库和插件文件应包含一个定义语句,该语句定义所有被视为通用/下载一次的依赖项。

({
    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'
})

回答by Tomas Kirda

You should use same configuration for both environments. And this configuration that you have should be in the external file. When you optimize it using r.j, all modules already in that single file so RequireJS will just use them without loading. Seems like you need to tune your build process.

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

Checkout my recent blog postabout it.

查看我最近关于它的博客文章