README

OroRequireJSBundle 使用 RequireJS 库以实现 Oro 应用程序中 JS 组件的模块化结构。

该软件包允许开发者在使用 YAML 文件定义 RequireJS 配置，级别为软件包级别。它还提供了一个 CLI 工具，用于从软件包收集 RequireJS 模块和配置，在生产模式下合并和压缩它们。

有关 RequireJS 配置选项的详细信息，请参阅 RequireJS API。有关 RequireJS 构建选项的详细信息，请参阅 example.build.js。

Require.js 配置生成

配置

require.js 配置的常用选项位于 config.yml

oro_require_js:
    config: # common options which will eventually get into require.js config file
        waitSeconds: 0
        enforceDefine: true
        scriptType: 'text/javascript'

特定于软件包的选项定义在 requirejs.yml 文件中，该文件位于 %BundleName%\Resources\config\requirejs.yml。它可以包含三个部分 shim、map 和 paths（请参阅 RequireJS API）。每个软件包的 JavaScript 模块都必须在 paths 部分中定义，其中键是模块名称，值是从文档根目录的相对路径。

config:
    shim:
        'jquery-ui':
            deps:
                - 'jquery'
    map:
        '*':
            'jquery': 'oroui/js/jquery-extend'
        'oroui/js/jquery-extend':
            'jquery': 'jquery'
    paths:
        'jquery': 'bundles/oroui/lib/jquery-1.10.2.js'
        'jquery-ui': 'bundles/oroui/lib/jquery-ui.min.js'
        'oroui/js/jquery-extend': 'bundles/oroui/js/jquery-extend.js'

生成

主要的 require.js 配置是自动生成的，并嵌入到 HTML 页面中。配置存储在应用程序缓存中。如果您想更新 require.js 配置，只需清理缓存即可。

用法

要在您的页面上获取带有其配置的 require.js 脚本，只需将 OroRequireJSBundle 中的 scripts.html.twig 模板包含到您的 index.html.twig 模板的 <head/> 标签中。

<head>
    <!-- -->
    {% include 'OroRequireJSBundle::scripts.html.twig' %}
    <!-- -->
</head>

该模板 scripts.html.twig 接受两个可选参数 compressed 和 config_extend。

compressed 是布尔值（默认为 true），确定是否使用压缩 js 文件。通常它与 app.dev 标志相反。
config_extend 是一个包含 JavaScript 代码的字符串，允许在运行时模式下扩展 requirejs 配置（请参阅运行时 require.js 配置）。

{% set requirejs_config_extend %} // 自定义 JavaScript 代码 {% endset %} {% include 'OroRequireJSBundle::scripts.html.twig' with { compressed: not app.debug, config_extend: requirejs_config_extend } %}

运行时 require.js 主配置扩展

有时仅静态指定 require.js 配置设置是不够的，需要在每次启动时动态修改某些参数。可以通过 OroRequireJSBundle::scripts.html.twig 模板的 config_extend 参数来实现这一点。该变量可以包含一段自定义配置，该配置将在加载通用配置后以及任何模块使用之前应用。

例如，动态定义翻译字典的路径（取决于当前使用的区域设置）

{% set requirejs_config_extend %}
    require({
        paths: {
            'oro/translations':
                '{{ url('oro_translation_jstranslation')[0:-3] }}'
        }
    });
{% endset %}

从代码执行顺序的角度来看，它看起来是这样的

生产模式（并且已构建资源存在）
- 执行所有自定义配置
  require(/* ... */); require(/* ... */); require(/* ... */);
- 加载单个压缩的js资源（包含 require-config.js + require.js 和其他模块）
开发模式（或构建资源不存在）
- 加载 require.js
- 加载 js/require-config.js
- 执行所有自定义配置
  require(/* ... */); require(/* ... */); require(/* ... */);

参见 @OroRequireJSBundle::scripts.html.twig

构建项目

配置

构建配置从 config.yml 开始

oro_require_js:
    build_path: "js/oro.min.js"     # relative path from document root folder to project built
    building_timeout: 3600
    js_engine: "node"               # can be configured to use other engine, e.g. Rhino
    build_logger: false             # show in browser console not optimized RequireJS modules 
    build:                          # build.js's common options
        optimize: "uglify2"
        preserveLicenseComments: true
        generateSourceMaps: true
        useSourceUrl: true

参见 oro_require_js.build 选项的详细信息。

除了通用构建配置，你还可以在 %BundleName%\Resources\config\requirejs.yml 文件中设置特定于捆绑的选项，在根部分 build。

build:
    paths:
        'autobahn': 'empty:'

此指令将阻止模块被连接到构建文件中。

构建

要为JS资源进行构建，只需在控制台中执行一个命令

php bin/console oro:requirejs:build

它将

从 oro_require_js.build（config.yml）获取初始配置；
通过在捆绑中找到的配置扩展它（%BundleName%\Resources\config\requirejs.yml）；
生成 build.js - 构建器的配置；
运行构建器（耗时过程，尤其是对于Rhino JS引擎）；
删除 build.js。

oro / requirejs-bundle

维护者

详细信息

README

Require.js 配置生成

配置

生成

用法

运行时 require.js 主配置扩展

构建项目

配置

构建