问题标签 [grunt-contrib-requirejs]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
37 浏览

requirejs - 将未优化的文件与 r.js 一起使用

我正在使用以下优化器设置优化我的 Durandal 构建:

我的问题是我的 中有一个config.jsrequireConfig.paths我想将其排除在优化之外并用作非优化版本。这样做的原因是因为我希望能够在不深入优化文件的情况下更改构建中的配置文件。

我试过excludeand empty:,但这只会从优化的 js 文件中排除配置。我如何将它作为“远程”文件包含在内?

配置.js:

0 投票
3 回答
191 浏览

javascript - 在 Durandal 构建中从优化中排除文件

我正在使用 Grunt 构建Durandal 入门套件 pro包。

一切都很好,除了一个小细节。我想app-config从优化器中排除一个文件(如下),并在我的构建完成后将其保留为非缩小文件。

根据其他 SO 线程建议,我目前正在使用 排除它empty:,这会按预期将其从优化文件中删除。但是,当我打开构建的项目时,控制台中出现错误:

Uncaught Error: main missing app-config

杏仁有问题吗?我尝试使用 将其切换到完整的 requirejs include: ['path/to/require'],但没有成功。

如果您想在本地复制它,您可以从上面的链接下载入门工具包,或者使用与我的示例更接近的稍微配置的版本。只需npm install在文件夹中运行一个就可以了。

0 投票
1 回答
677 浏览

reactjs - 在压缩文件中使用 React-dom 和 RequireJS

我正在尝试通过 RequireJS 在充当独立库的缩小文件中使用 React + ReactDOM。

我已经到了可以使用 React(捆绑在缩小文件中)的地步,但是当尝试使用 ReactDOM 时一切都中断了,到目前为止我发现的可能原因是,在尝试加载“require-dom”时,需要尝试导入文件“react-dom”,而不是从缩小文件中加载代码。(实际上包含 react-dom)。

实际上我正在使用 grunt 来预编译所有需要的文件。这是我的 grunt requirejs 配置:

Main.js 如下:

使用上述配置编译所有代码后,我将其包含在一个 html 文件中,如下所示:

Index.js 是一个 requirejs 文件,如下:

执行上述代码时收到的错误如下:

如果我删除 react-dom 一切都会顺利加载。

到目前为止,我已经尝试了几件事,将 React 作为 shim 导入,以便 react-dom 检测到全局 React var,但这也没有奏效。

任何帮助将不胜感激,在此先感谢。

更新: 带有示例代码的 Github 存储库

更新 2:在对 react-dom 库和缩小脚本进行了一段时间调试后,我发现 main 方法在缩小脚本中的调用“define('react-dom')”之前执行,所以问题解决了作为“如何让主脚本等到定义'react-dom'的代码被执行”。

0 投票
1 回答
371 浏览

javascript - 组合 requirejs 包和 requirejs 优化器时的模块注入问题

我目前正在尝试提高一个相当大的 Angular JS 应用程序的性能,方法是从一大块 javascript 文件转移到 3 - 4 个较小的文件,甚至可能会延迟加载。

我正在使用以下 npm 包和版本:

最初,有一个 grunt 任务,它获取所有必需的 javascript 文件,使用 requirejs 优化器将它们全部包含到一个文件中,因为有一个主配置文件main.js,其中定义了所有特定包的所有路径和填充程序(我如果需要,可以发布示例配置等)。

现在的想法是从拥有这个大文件转变为将应用程序模块化为 3 - 4 个较小的 javascript 文件,以缩短加载时间(因为并行加载 4 个小文件比加载 1 个大文件要快)。

为此,我们使用 grunt-requirejs 中的 modules 选项和 bundles 选项来定义所有模块及其内容。

项目结构如下:

grunt 任务定义如下:

执行 requirejs:bundle 后的 dist 文件夹如下所示:

因此,app_minitestservice被包含在app.js中, 并且angularjquery被包含在vendor.js中。

app.js在 src 文件夹中看起来或多或少是这样的:

我很抱歉文件内容太长,但没有它就无法描述问题:) 所以,问题是,我想有一个中心位置来放置优化器和应用程序本身的整个 Requirejs 配置。但是,显然优化器的路径是相对于 gruntfile 路径的,而运行应用程序的路径是相对于相应文件的。

由于包配置是由 requirejs 自动生成的(因为 bundlesConfigOutFile),所以我不能对那里使用的名称做很多事情,因为它们是从模块选项中提取的。

生成并包含在 app.js 中的 bundles 配置如下所示:

现在首先,我遇到了 RequireJs 想要通过路径加载 vendor.js 的问题scripts/scripts/vendor.js

为了解决这个问题,我baseUrl = '/'require.configofapp

但是现在我有一个问题,即testservice无法注入app_miniand angular,所以它在那里抛出错误,因为这两个模块都是未定义的。

dist 文件夹中优化后的 app.js 看起来是这样的,或许你能发现问题:

0 投票
1 回答
364 浏览

javascript - RequireJS 包在优化器中失败 - “模块共享相同的 URL”

tl;博士

RequireJS 优化器不喜欢我在模块上定义包定义,但如果我不定义包,也找不到模块。

长版

尝试使用 requirejs 优化器时出现以下错误:

我实际上正在使用 grunt-contrib-requirejs 来优化我的 js 脚本以进行生产。在添加之前一切正常simulator.bundle

我有 3 个捆绑包:

  • app.bundle(主包)
  • 模拟.bundle
  • 供应商.bundle

这是modulesrequirejs grunt 任务的选项

中的捆绑包simulation.bundle似乎是问题所在。但是,如果我删除它们,则找不到文件:

simulation.bundle只是一个虚拟模块,加载angularapp_mini

所以无论哪种方式,优化器都无法处理依赖关系。我必须如何配置它才能使其工作?

0 投票
1 回答
150 浏览

javascript - Grunt require 无法按预期创建多个模块

我的结构如下:

  • 应用程序
    • 脚本
        • jQuery.js
        • 引导程序.js
        • 时刻.js
      • 应用程序.js
      • 供应商.js
      • common.js
      • app.config.js
      • main.js #需要配置

注意 vendor.js 只是一个包含 libs 下所有文件的文件。前任

//vendor.js define(['jquery','bootstrap', 'moment'], function(){});

只是列出依赖项:

  • app.js取决于common.jsapp.config.js
  • common.js取决于vendor.js
  • app.config.js取决于moment.js

我想要做的是运行 grunt requirejs 命令来创建一个vendor.js包含所有文件的文件libs/和一个app.js不包含在vendor.js.

这是我的 requirejs 选项的样子:

我从运行上面得到的是以下 build.txt

如您所见,所有文件都只是附加到vendor.js而不是app.js. 我希望 vendor.js 包含vendor.js及其依赖项。并app.js包括其余的,因为vendor被排除在外。

我已经尝试了很多组合,但这里仍然没有。

0 投票
1 回答
45 浏览

javascript - 使用 r.js 连接和丑化 Node.js 文件

在我的后端,我以这种方式将 Node.js 与 Require.js 一起使用:

在我的前端,我使用 r.js 将所有文件连接到一个大文件中并将其丑化。我想在这里做同样的事情。

后端的问题是,在这种情况下,由于 NodeJs 有自己的模块加载器,Node 本身能够在 node_modules 文件夹中找到 express,但 r.js 只在主文件夹中搜索 express ./ express .js 和不在 /node_modules/ express /index.js

我如何告诉 r.js 也查看 node_modules 文件夹?

0 投票
0 回答
61 浏览

angularjs - 我使用了requirejs oprimizer ie uglify 来缩小momentjs,但是当我使用moment 时,它给了我以下错误

TypeError: moment 不是 Object.commonFunctionsFactory.formatDate 的函数

但是,如果我使用 jscompress 在线缩小我的momentjs 则结果文件对我来说工作正常。

咕噜任务

0 投票
1 回答
67 浏览

javascript - 西兰花和 RequireJS

嗨,我正在尝试使用花椰菜改善 requirejs 应用程序的构建时间。我正在使用 Grunt 作为我的任务运行器。这是我正在使用的插件:

https://github.com/dfournier/broccoli-requirejs

这是我的代码。运行“测试”任务什么都不做?

这是项目的结构:

私有/应用程序/控制器/one/js/index.js
私有/应用程序/控制器/两个/js/index.js
...

requirejs 选项适用于 grunt-contrib-requirejs,但不适用于 broccoli 插件。关于我做错了什么的任何想法?

谢谢!

0 投票
1 回答
493 浏览

javascript - requirejs没有正确加载对象

我正在使用配置 angularjs 项目依赖项requirejs

以下是配置

运行时依赖项是,

在cornerstone.js 中,我以以下方式加载模块,

我收到以下错误,

myApp.js:2312 Uncaught(in promise) ReferenceError: cornerstone is not defined

define("cornerstone", [], factory);
我用一切替换错误行时,root["cornerstone"] = factory();一切正常。

[编辑]
工厂方法是这个问题中使用的引导程序:尝试理解 Webpack