Question

我正在使用requirejs进行多页项目。每个页面都是一个App。所有应用程序都有一些共同的依赖关系，即jquery，backbone，underscore等。

我想将所有这些依赖项移到单个文件中。

这就是js文件夹结构的样子：

JS
- base-app-require-configuration.coffee
- 应用
  - homepeage
    - init.coffee
    - build.js
    - application.coffee
  - APP1
    - init.coffee
    - build.js
    - application.coffee
  - APP2
    - init.coffee
    - build.js
    - application.coffee

主页应用示例：

JS / base-app-require-configuration.coffee

define ->
  requirejs.config
    urlArgs: "bust=#{ new Date().getTime() }"

    # yep, tricky paths here
    paths: 
      jquery: '../../jquery.min' 
      underscore: '../../underscore-min'
      backbone: '../../backbone.min'

JS /应用程序/网页/ init.coffee

define [
  '../../base-app-require-configuration'
], (
  baseRequireConfig
) ->
  requirejs.config
    paths:
      'jquery.alphanum': '../../jquery.alphanum'
    shim:
      'jquery.alphanum':
        deps: ['jquery']

  require [
    'jquery'
    'application'
  ], (
    $
    Application
  ) ->
    $ -> new Application

JS /应用程序/网页/ build.js

({
mainConfigFile: ['../../base-app-require-configuration.js', 'init.js'],
wrapShim: 'true',
baseUrl: './',
name: 'init',
findNestedDependencies: true,
out: 'init.js'
})

我的数据名称是init.js

对于多个应用程序来说，这一点非常有效，并且公共依赖项被移动到一个sigle文件 - base-app-require-configuration.coffee ，除了一件事：压缩/优化这个的唯一方法使用r.js是将标志 findNestedDependencies 设置为true，否则r.js将看不到嵌入到define / require中的requirejs.config调用。

我的问题是：

使用 findNestedDependencies 是一种很好的做法吗？
有没有更漂亮的方法来组织我的依赖关系而不重复？
如果有这样的方式 - 它会与r.js兼容吗？

Answer 1

让我与您分享此解决方案。

我也在寻找与 requirejs 类似的解决方案（如何在不重复长配置的情况下组织多页项目，使用“垫片”功能），我找到了以下一个（如果这个片段可以帮助你，我会很高兴）：

内部HTML：

...

    <?php
function svg () {
    $content = '<svg>
    <rect x="5" y="10" width="830" height="25" style="fill:rgb(240,240,240)"/>
    <line x1="5" y1="35" x2="835" y2="35" style="stroke:rgb(0,0,0);stroke-width:0.5" />
    <text x="210" y="25" fill="black" font-size="10">začátek</text>
    <text x="274" y="25" fill="black" font-size="10">konec</text>
    <text x="10" y="10" fill="black" font-size="14">ěščřžýáíéůú</text>
    </svg>
    ';
    $content = iconv('UTF-8', 'UTF-8', $content);
    return $content;
}
include("../libs/mPDF/mpdf.php");
$mpdf=new mPDF('utf-8','A4',9,'arial',15,10,22,35,10,15);
$mpdf->allow_charset_conversion=true;
$mpdf->charset_in='utf-8';
$mpdf->mirrorMargins = 0;
$mpdf->WriteHTML(svg ());
$mpdf->Output(matomas_.$nazev_postu._.date('d-m-Y').".pdf",I);
exit; 
?>

...

其中“common.js”包含项目的 requirejs 的通用配置。此示例来自：https://github.com/requirejs/example-multipage-shim/blob/master/www/page1.html。

示例项目的完整代码位于：https://github.com/requirejs/example-multipage-shim。示例“build.js”文件也提供了，我看到在这种情况下“findNestedDependencies”没有必要。

当然，HTML中有更多代码，但我认为这并不是一个重要的缺点。

Answer 2

使用findNestedDependencies是一个好习惯吗？

不确定。我唯一知道的是，这个选项可以大大减慢捆绑过程： Is r.js dependency tracing significantly slower since v2.1.16? Or is it just me?

有没有更漂亮的方法来组织我的依赖关系而不重复？如果有这样的方式 - 它会与r.js兼容吗？

这是一篇使用r.js组织骨干模块的精彩文章： https://cdnjs.com/libraries/backbone.js/tutorials/organizing-backbone-using-modules

动态requirejs配置扩展

2 个答案: