Jim*_*Jim 10 requirejs angular
在将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的引导功能:
"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中添加一些填充程序,但是我还没有成功设置脚本加载依赖项.
谢谢
Gil*_*ain 15
你要做的事情是不可能的(好吧,在软件工程中,就像在艺术中 - 一切皆有可能,但要实现这一点,你需要编辑角度的脚本,我们不希望这样).
与Angular1不同,Angular1是在ECMAScript5(喜爱的JavaScript语言)中开发的,Angular2是在ECMAScript6(和TypeScript)中开发的.
其中一个区别是在ECMAScript5中为了加载脚本文件(.js,.ts等),我们需要添加一个<script>带有src属性的标签,该标签指向脚本文件.另一种方法是使用第三方库,它以异步方式加载脚本(像这样的库的例子是:RequireJS,WebPack,SestemJS等).
RequireJS的主要缺点是它只适用于以AMD格式(异步模块定义)编写的脚本,例如:
define(['dependence_1', 'dependence_2', ...], function(alias_1, alias_2, ...) {
// ...
});
使用Angular1和RequireJS时,此语法非常有效.
现在,当我们查看Angular2库时,我们可以看到它不是用AMD语法编写的,这意味着它无法使用RequireJS加载 - 无需将代码重写为AMD格式.Angular2期待您使用某种通用模块加载器.这里的关键字是通用的,意味着可以加载各种脚本格式的模块加载器(AMD模块,CommonJS模块和ES6模块).通用模块加载器的示例有:WebPack和SystemJS.
现在让我们谈谈你的问题的解决方案,我相信你需要从RequireJS迁移到Webpack - 因为迁移不是那么复杂.
第一步 - 第三方图书馆
当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
| 归档时间： |
|
| 查看次数： |
11249 次 |
| 最近记录： |