如何使用RequireJS建立轮廓+ r.js在多页项目(How to use RequireJS

2019-06-26 13:53发布

目前我正在学习RequireJS基本面和有关于建造轮廓,主文件,并使用RequireJS的多页面项目的一些问题。

我的项目的目录结构如下:

httpdocs_siteroot/
    app/
        php files...
    media/
        css/
            css files...
        js/
            libs/
                jquery.js
                require.js
                mustache.js
            mains/
                main.page1.js
                main.page2.js
                main.page3.js
            plugins/
                jquery.plugin1.js
                jquery.plugin2.js
                jquery.plugin3.js
            utils/
                util1.js
                util2.js
        images/

由于这个项目是不是一个单页的应用程序,我会为每个页面创建一个单独的主文件(尽管一些网页使用相同的主文件)。

我的问题是:

  1. 是RequireJS甚至实际为不是单页的项目?

  2. 如果不使用优化,我的每一个主文件启动以基本相同的配置选项:

     requirejs.config({ paths: { 'jquery': 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min' }, baseUrl: '/media/js/', // etc... }); require(['deps'], function() { /* main code */ }); 

    是否有办法避免这种情况? 就像每个主文件包括在同一建立配置文件,而无需实际构建呢?

  3. 应该r.js去httpdocs_siteroot的父目录?

  4. 是不是有什么错得离谱与我的应用程序目录结构或我的使用RequireJS的?

Answer 1:

首先,这不是一个独特的解决方案的问题。 我会解释我使用的是对我的作品RequireJS的方式,并可以为你工作:)

其次,英语不是我的母语。 关于语言矫正和提示将非常赞赏。 随意,球员:)

1)是否需要JS甚至实际为不是单页的项目?

这取决于。 如果你的项目没有共享,例如页面之间的代码,RequireJS帮助将是温和的。 RequireJS的主要思想是模块化应用程序成可重用的代码块。 如果你的应用程序只使用特定的页面代码,然后使用RequireJS可能不是一个好主意。

2)在不使用的优化,我的每一个主文件启动以基本相同的配置选项。 是否有办法避免这种情况? 就像每个主文件包括在同一建立配置文件,而无需实际构建呢?

我看到的唯一方法是使主文件中的配置,或创建一个模块,将配置RequireJS,然后使用该模块作为main.js.第一依赖 但是,这可能会非常棘手。 我没有在我的应用程序使用许多main.js文件; 我只用一个充当装载机(见下文)。

3)如果在httpdocs_siteroot的父目录r.js去?

不必要。 你可以把它放在/ media目录里面,因为所有的客户端的东西是存在的。

4)有什么错得离谱与我的应用程序目录结构或我的使用requirejs的?

我不会说。 在另一方面,结构也许有点过于分散。 例如,你可以把所有的“第三方东西” A /供应商目录中。 但是,这只是糖; 您的结构将运作良好,似乎是正确的。 我认为主要的问题是在多个主文件requirejs.config()调用。

我现在有同样的问题,我结束了以下解决方案:

1)不要换用定义不符合要求的AMD-文件。 虽然它的工作原理,可以实现使用requirejs.config的“垫片”属性(见下文)相同的结果。

2)在多页面应用中,对于我的解决方案是不要求来自优化main.js文件中特定页面模块。 相反,我需要从主文件中的所有共享的代码(第三方和我自己),离开特定页面的代码添加到每个网页上加载。 主文件最终只在于加载的所有共享/ lib中的文件后,开始特定页面的代码加载器。

这是样板我用它来建立与requirejs一个多页应用

目录结构:

/ src目录 - 我把所有的客户端的东西一个src目录里面,这样我就可以运行这个目录里面的优化(这是你的媒体目录)。

/ src目录/供应商 - 在这里,我把所有的第三方文件和插件,包括require.js。

/ src目录/ lib中 - 在这里,我把所有我自己的代码是由整个应用程序或某些页面共享。 换句话说,不特定页面模块。

/ src目录/页模块-XX - 然后,我创造,我有每个页面一个目录。 这不是一个严格的规则。

/src/main.js:这是整个应用程序的唯一主文件。 它会:

  • 配置RequireJS,包括垫片
  • 加载共享库/模块
  • 加载特定页面的主模块

这是一个requirejs.config调用的例子:

requirejs.config({
        baseUrl: ".",
        paths: {
            // libraries path
            "json": "vendor/json2",
            "jquery": "vendor/jquery",
            "somejqueryplugion": "vendor/jquery.somejqueryplufin",
            "hogan": "vendor/hogan",

            // require plugins
            "templ": "vendor/require.hogan",
            "text": "vendor/require.text"
        },
        // The shim section allows you to specify 
        // dependencies between non AMD compliant files.
        // For example, "somejqueryplugin" must be loaded after "jquery".
        // The 'exports' attribute tells RequireJS what global variable
        // it must assign as the module value for each shim.
        // For example: By using the configutation below for jquery, 
        // when you request the "jquery" module, RequireJS will 
        // give the value of global "$" (this value will be cached, so it is
        // ok to modify/delete the global '$' after all plugins are loaded.
        shim: {
            "jquery": { exports: "$" },
            "util": { exports: "_" },
            "json": { exports: "JSON" },
            "somejqueryplugin": { exports: "$", deps: ["jquery"] }
        }
    });

然后,配置完成后,我们可以把第一个要求()请求所有这些库,之后做我们的“主页”模块的要求。

//libs
require([
    "templ",     //require plugins
    "text",
    "json",      //3rd libraries
    "jquery",
    "hogan", 
    "lib/util"  // app lib modules
 ],
    function () {
        var $ = require("jquery"),
            // the start module is defined on the same script tag of data-main.
            // example: <script data-main="main.js" data-start="pagemodule/main" src="vendor/require.js"/>
            startModuleName = $("script[data-main][data-start]").attr("data-start");

        if (startModuleName) {
            require([startModuleName], function (startModule) {
                $(function(){
                    var fn = $.isFunction(startModule) ? startModule : startModule.init;
                    if (fn) { fn(); }
                });
            });
        }
    });

正如你可以在需要()以上,我们预计在require.js script标签的另一个属性的身上看到。 数据启动属性将保持当前页面模块的名称。

因此,在HTML页面上,我们必须增加这些额外的属性:

<script data-main="main" data-start="pagemodule/main" src="vendor/require.js"></script>

通过这样做,我们将结束与一个包含“/供应商”和“/ lib目录”目录(共享资源)的所有文件的优化main.js,而不是专门针对网页的脚本/模块,因为它们不硬编码在main.js的依赖关系。 特定页面模块将分别的应用程序的每一页上被加载。

“页面主”模块,应该返回一个function()将由“APP主”以上来执行。

define(function(require, exports, module) {
    var util = require("lib/util");

    return function() {
        console.log("initializing page xyz module");
    };
});

编辑

下面是例子,你如何使用的建造轮廓,以优化有一个以上的文件中的特定页面模块。

例如,假设我们有下面的页面模块:

/page1/main.js

/page1/dep1.js

/page1/dep2.js

如果我们不优化此模块,那么浏览器就会使3个请求,每一个脚本。 我们可以通过指示r.js创建一个包避免这种情况,包括这3个文件。

在建造轮廓的“模块”的属性:

...
"modules": [
   { 
      name: "main"  // this is our main file
   },
   {
        // create a module for page1/main and include in it
        // all its dependencies (dep1, dep2...)
        name: "page1/main",
        // excluding any dependency that is already included on main module
        // i.e. all our shared stuff, like jquery and plugins should not
        // be included in this module again.
        exclude: ["main"]
   }
]

通过这样做,我们创建了具有所有依赖另一个单页主文件。 但是,因为我们已经有一个主文件,将载入我们的所有共享的东西,我们不需要在第1页/主模块再次囊括其中。 该配置是有点麻烦,因为你必须为在那里你有不止一个脚本文件每一页模块做到这一点。

我上传在GitHub上的样板代码: https://github.com/mdezem/MultiPageAppBoilerplate 。 这是一个工作的样板,只要安装节点r.js模块节点并执行build.cmd(在/ build目录里面,否则,因为它使用相对路径会失败)

我希望我已经明确。 让我知道,如果事情听起来很奇怪;)

问候!



Answer 2:

<script data-main="js/main" src="js/lib/require.js"></script>


// file: js/main

require(['./global.config'], function(){
    require(['./view/home'], function() {
        // do something
    });
});

这是我在我的项目中使用。



文章来源: How to use RequireJS build profile + r.js in a multi-page project