Magento 2：主题中的requirejs-config.js？

19

是否可以requirejs-config.js通过Magento主题包含文件（或以其他方式配置RequireJS）？还是保留了Magento模块的功能？到目前为止，关于主题结构的开发文档信息尚不明确。

开发人员文档未提及有关RequireJS的任何内容-但是，主题确实包含，web这意味着javascript可以与它们捆绑在一起。如果javascript可以与主题捆绑在一起，则意味着RequireJS模块可以与主题捆绑在一起，如果RequireJS模块可以与主题捆绑在一起，则该模块可能需要特定的RequireJS配置。

我天真地假设主题将具有这种功能，但是我无法以这种方式找到任何文档，也没有一个下午可以花时间在Magento的requirejs-config.js文件上进行必要的代码拼写，包括。

— 艾伦·斯托姆
source

嗨@艾伦你能调查一下吗？=> magento.stackexchange.com/questions/253507/…–罗汉哈帕尼

— Rohan Hapani）

1

@RohanHapani最近没有真正进行M2开发，所以我不能说最重要的。

— 艾伦·斯托姆

10

您实际上可以在主题模块目录中包含require-config.js。

问题是（实际上对于我们的前端团队而言）似乎没有可能覆盖配置，而是扩展配置。

因此，此处以Magento_Theme模块为例，如果在<theme_base_dir>/Magento_Themedir 下添加require-config.js ，则该配置将添加到生成的require-config.js文件中，并且还将添加Magento_Theme模块的配置。

为了回答您的问题，我还尝试在主题<theme_base_dir>/web目录下以及主题根目录下添加require-config.js 。两者都不起作用。更新：实际上根据以下答案，可以将其放入主题库目录中

所以答案基本上是肯定的，因为您可以在任何模块下添加任何js要求（与主题相关的js文件最好放在<theme_base_dir>/Magento_Theme目录下）

尽管我会说，应该有可能在任何模块之外添加与主题相关的require-config.js（也许您停用了给定的模块），并且还应该有可能覆盖模块require-config.js。

两者似乎都不可能是atm。

===更新===

实际上似乎有特定于主题的require-config.js。请参阅下面的@Gareth Daine答案

— 戴维·韦洛恩
source

回复：“在Magento_Theme下”您可以更明确地说吗-您所引用的主题和/或模块中的哪个文件夹尚不完全清楚。明确的含义path/to/theme/files/[etc/Magento_Theme

— 艾伦·风暴

我的意思是在您的主题中覆盖acutal模块。因此，对于模块Magento / Theme，require-config.js将是<theme_base_dir> /Magento_Theme/require-config.js，其中Magento_Theme是实际的模块名称

— David Verholen 2016年

很好，更新了答案以使其更加清晰

— David Verholen '16

因此，我是否认为在应用程序/设计/前端/ <供应商> / <主题> / web / js下requirejs-config.js文件不起作用？

— Gareth Daine

它确实在文档中说，可以在主题级别为app / design / {area} / {Vendor} / {theme} / web中的所有库指定JavaScript资源。

— Gareth Daine

15

好的，我想我可能已经解决了它，并且我认为文档不明确，需要进行更新以阐明流程。

我分别requirejs-config.js从web/js和web目录中Magento_Theme的主题目录和根目录移到和目录中<Vendor>/<theme>，现在我的RequireJS配置requirejs-config.js与所有其他包含项合并到主目录中。

因此，requirejs-config.js根据主题/模块要求，您似乎必须在以下位置包含文件。

主题等级

app/design/frontend/<Vendor>/<theme>/requirejs-config.js

模块级别

app/design/frontend/<Vendor>/<theme>/<Module_Name>/requirejs-config.js

因此，在您requirejs-config.js的主题主题中，应将组件映射到路径，然后用于shim声明任何依赖项：

var config = {
    map: {
        'component': 'js/component'
    },
    shim: {
        'component': {
            deps: ['jquery']
        }
    }
};

然后，<script>如果您要沿着这条路线走下去，则需要创建一个模板来通过标签保存组件的初始化（除非您将其直接附加到.phtml文件中的元素上），包括以下内容：

<script type="text/x-magento-init">
    {
        "*": {
            "js/component": {} // Not entirely sure what {} is and what I'm passing here
        }
    }
</script>

或者，将其绑定到元素：

<script type="text/x-magento-init">
    {
        "#element": {
            "js/component": {} // Not entirely sure what {} is and what I'm passing here
        }
    }
</script>

然后，只需在您的布局说明一个.phtml模板，例如，我把我的内default.xml位于app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout身体节点下和参考：

<block class="Magento\Framework\View\Element\Template" name="theme.js" template="Magento_Theme::html/js.phtml" />

— 加雷斯·戴恩
source

“ js / component”中的{}：{}用于将选项传递给组件

— Vincent Hornikx，2016年

2

没有足够的代表对此作评论，但只是要注意Gareth的回答对我而言并不奏效。

var config = {
    map: {
        '*': {
            'component': 'js/component'
        }
    },
    shim: {
        'component': {
            deps: ['jquery']
        }
    }
};

包装'component'：'js / component'可以解决问题'*':{}。

另外，不是创建模板文件，而是在下面的顶部添加了代码 app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default.xml

    <referenceContainer name="after.body.start">
        <block class="Magento\Framework\View\Element\Text" name="jquery.bootstrap">
            <arguments>
                <argument translate="true" name="text" xsi:type="string"><![CDATA[<script type="text/x-magento-init">{"*":{"jquery.bootstrap":{}}}</script>]]></argument>
            </arguments>
        </block>
    </referenceContainer>

— 贾斯汀
source

1

是requirejs-config.js可以添加到主题如下。这就是我在magento2自定义主题中添加dotdotdot库的方式。

1.按照以下路径下载Js Library并将其添加到您的主题中：

// app/design/frontend/Namespace/themename/web/js/jquery.dotdotdot.min.js

2.按照以下步骤创建主题的requirejs文件，并让requirejs知道新添加的库。

// app/design/frontend/Namespace/themename/requirejs-config.js
var config = {
   map: {
       '*': {
           dotdotdot: 'js/jquery.dotdotdot.min',
       }
   }
};

3.如下使用主题的主js文件中添加的库：

// app/design/frontend/Namespace/themename/web/js/main.js
require([ 'jquery' , 'dotdotdot' , 'domReady!'],function($){
    $(window).load(function() {
        //custom js code
        /* $(".product-item-name").each(function(){
            $(this).dotdotdot(); 
        }); */
    });
});

4.并将主题的js文件包括在网站的头部中，如下所示：

// app/design/frontend/Namespace/themename/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="js/main.js"/> 
    </head>
</page>

您可以在magento2的每个页面上添加任何外部JS库和自定义文件。

— 赛义德
source

我试图通过requirejs-config.js这种方式添加一个库。但是，RequireJS然后尝试js/some.library.js从根目录而不是从主题目录加载。

— fritzmg

啊，您必须省略.js扩展名...傻了:)

— fritzmg