个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
24
4
在将 RequireJS 合并到应用程序中时，我无法正确加载 Angular2。
为简单起见，我在位于此处的 Angular2 上使用非常简单的 Hello World Javascript 教程:https://angular.io/docs/js/latest/quickstart.html
我使用 Angular1 使这个系统运行良好，但我似乎无法使用 Angular2 复制这种成功。
这是我的 index.html 文件:
<html>
<head>
<title>Angular 2 QuickStart JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load RequireJS -->
<script type="text/javascript", src="bower_components/requirejs/require.js", data-main="/require.config.js"></script>
</head>
<!-- 3. Display the application -->
<body>
<ireland-product-app>Loading...</ireland-product-app>
</body>
我的 require.config.js 文件:
require([
'assets/requiredPathsAndShim.js'
], function(requirePathsAndShim) {
require.config({
baseUrl: '/',
paths: requirePathsAndShim.paths,
shim: requirePathsAndShim.shim,
/// Kick start app...
deps: ['app/main']
});
});
我使用 requiredPathsAndShim.js 文件加载我看到的启动 Angular2 应用程序所需的所有依赖项。这是文件:
"use strict";
(function(define) {
define([], function() {
return {
waitSeconds : 10000,
paths: {
'shim' : 'node_modules/core-js/client/shim.min',
'zone' : 'node_modules/zone.js/dist/zone',
'Reflect' : 'node_modules/reflect-metadata/Reflect',
'Rx' : 'node_modules/rxjs/bundles/Rx.umd',
'core' : 'node_modules/@angular/core/core.umd',
'common' : 'node_modules/@angular/common/common.umd',
'compiler' : 'node_modules/@angular/compiler/compiler.umd',
'platform-browser' : 'node_modules/@angular/platform-browser/platform-browser.umd',
'platform-dynamic' : 'node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd'
},
shim : {
}
}
});
})(define);
然后我从我的“required.config”文件加载“app/main”文件，这将加载 Angular2 的 Bootstrap 功能:
"use strict";
(function() {
define([
'app/app.component'
], function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic.bootstrap(app.AppComponent);
});
});
})();
app/app.component 文件是一个简单地返回我的 Angular2 组件的文件，该组件被传递到 main.js 引导函数以启动应用程序。这是文件:
"use strict";
(function() {
define([
], function() {
return {
AppComponent : ng.core.Component({
selector : 'ireland-product-app',
template : '<h1>Product App</h1>'
})
.Class({
constructor : function() {}
})
}
});
})();
我已经用这个玩了几个小时，但似乎无法正常工作。谁能指出我为什么这不起作用的正确方向？我感觉需要将一些垫片添加到 require.config 中，但到目前为止我还没有成功设置脚本加载依赖项。
谢谢
最佳答案
您尝试做的事情是不可能的(好吧，在软件工程中，就像在艺术中一样 - 一切皆有可能，但要实现这一点，您需要编辑 Angular 脚本，而我们不希望这样) .
与使用 ECMAScript5(最受欢迎的 JavaScript 语言)开发的 Angular1 不同，Angular2 是使用 ECMAScript6(和 TypeScript)开发的。
其中一个区别是，在 ECMAScript5 中，为了加载脚本文件(.js、.ts 等)，我们需要添加一个 <script>。用 src 标记属性，指向脚本文件。另一种方法是使用异步加载脚本的第 3 方库(此类库的示例有:RequireJS、WebPack、SestemJS 等)。
RequireJS 的主要缺点是它只适用于以 AMD 格式(异步模块定义)编写的脚本，例如:
define(['dependence_1', 'dependence_2', ...], function(alias_1, alias_2, ...) {
// ...
});
这种语法在使用 Angular1 和 RequireJS 时非常有效。
现在，当我们查看 Angular2 库时，我们可以看到它不是用 AMD 语法编写的，这意味着它不能使用 RequireJS 加载——除非将代码重写为 AMD 格式。 Angular2 期望您使用某种通用 模块加载器。这里的关键字是universal，意思是一个可以加载各种脚本格式(AMD模块、CommonJS模块和ES6模块)的模块加载器。通用模块加载器的例子有:WebPack 和 SystemJS。
现在让我们谈谈您的问题的解决方案，我相信您需要从 RequireJS 迁移到 Webpack - 因为迁移并不那么复杂。
第 1 步 - 第三方库
当使用 RequireJS 加载第三方库时，我们使用 RequireJS 的 path和 shims , 可以很容易地转换成 Webpack 的 alias .但这不是必需的:一旦你使用了 Webpack，你就有了 npm 支持。这意味着您可以运行 npm install library-name现在你可以在没有 RequireJS 的情况下使用这个库。
第 2 步 - 应用程序脚本
对我们来说幸运的是，我们几乎不需要在这里什么都不做。由于 Webpack 是一个通用的模块加载器，它可以加载 AMD 格式的脚本。因此，所有以 RequireJS 格式开发的应用程序脚本，都可以使用 Webpack 加载而无需任何更改。
有关如何从 RequireJS 迁移到 Webpack 的更多信息，请参阅这篇文章:https://gist.github.com/xjamundx/b1c800e9282e16a6a18e
关于Angular2 与 RequireJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37591412/
24
4
0
如何使用 requirejs 导入 recaptcha。我已经尝试了几件事，但没有任何效果。 我需要这样做，以便能够在加载后使用 reCaptcha 的渲染方法自行渲染它。 require.confi
我正在尝试将 OpenLayers 库与 RequireJS 一起使用。 问题是，OpenLayers 一直处于“未定义”状态，即使它被列为我的模块的唯一依赖项: define(['OpenLayer
我正在尝试使用 gulp-requirejs构建一个演示项目。我希望结果是一个包含所有 js 依赖项和模板的单个文件。这是我的 gulpfile.js var gulp = require('gulp
没有 Require.js 就可以在浏览器控制台中调用全局对象，例如 app app.movies 当我将代码包装在 RequireJS 模块中时，如何在浏览器控制台中访问模块中的数据？我会发现这有助
这个问题有 3 个部分。我有两个模块 a 和 b。 如何在最初需要 b 后重新定义它？ 如果 a 依赖于 b，我该如何更新 a 以使用新的 b？ 如何找到所有依赖于 b 的模块并更新它们？ 例如；
我正在尝试找到一种将 Backbone-relational 子模型与 RequireJS 一起使用的方法，其中子模型与 super 模型位于不同的文件中。 例如: // app.js define(
使用 require.js (r.js) 优化 js 代码时，将所有 js 源代码复制到目标目录(dir 属性)。 有没有办法(一些配置)来防止 requirejs 复制源文件？ 最佳答案 如果添加
main.js 文件中的代码如下: phantom.injectJs("libs/require-1.0.7.js"); require.config( {
我在 require-config.js 中配置了一些路径，如下所示: var require = { baseUrl: '/javascript', paths: {
我正在重构一个大型 javascript 代码库以使用 RequireJS。不幸的是，我正在处理的许多文件都不是面向对象的，并且在不进行重大修改的情况下无法返回对象。是否有更有效的方法让“依赖”模块访
我是 RequireJS 的新手，我对加载顺序感到困惑。 我有一个全局项目配置，需要在位于 js/app/* 的模块之前加载。 这是我的结构: index.html config.js js/
我已经使用 requireJS 设置了一个 Angular 应用程序。在部署之前，我将所有内容捆绑到一个唯一的文件中。通常，外部库没有 requireJS“定义”包装器。 例如Angular Para
假设我有一个如下所示的模块: define(['jquery', 'actions', 'util', 'text!../templates/dialog.html!strip', 'text!../
如何使用 grunt-contrib-requirejs配置或什至r.js Config不缩小特定文件。 我可以使用optimize: 'none'选项禁用所有文件的缩小。但我不知道如何对单个文件禁用
好吧，我已经知道你应该像这样使用 RequireJS 配置路径 require.config({ paths: { name: 'value' } }); 并这样调用它。 requir
我希望能够有选择地定义一个模块，然后在我的代码中使用或不使用它。我正在考虑的特殊情况是在调试/测试环境中加载模拟/ stub 模块，但不是在我上线时加载。这是示例: 在 html 文件中，可以选择加载
我为构建过程创建了一个任务，其中 requirejs 作为它的子任务之一，并且在 requirejs 之后几乎没有其他任务。该任务在运行 requirejs 后停止，即使使用详细信息也不会抛出错误。任
我想创建一个可以从我的 RequireJS 项目中的任何模块访问的变量。 例如，在初始化时我想设置: this.myVar = 123; 并且能够在我的 RequireJS 项目内部(但不是外部)的任
我正在使用 TypeScript、Backbone 和 Mustache 编写网络应用程序。我想使用 Requirejs 进行依赖加载。 我还在使用 TypeScript 的 Web Essentia
我正在尝试创建一个节点样板，并尝试创建一个任务来运行 Jasmine 测试。我的 Gruntfile.js 中有以下配置: jasmine: { src : ['static/test/spec/
我是一名优秀的程序员,十分优秀！