- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在部署一个网站,但我无法“捆绑”rxjs,因为我使用的是 Angular 的最终版本。我只能通过复制我网站上的整个文件夹 node_modules/rxjs 来部署 rxjs。
这是我的 SystemJS 配置
System.config({
map: {
'lodash':'http://127.0.0.1/js/lodash.min.js',
'@angular/core': 'http://127.0.0.1/js/core.umd.min.js',
'@angular/compiler': 'http://127.0.0.1/js/compiler.umd.min.js',
'@angular/common': 'http://127.0.0.1/js/common.umd.min.js',
'@angular/http': 'http://127.0.0.1/js/http.umd.min.js',
'@angular/platform-browser': 'http://127.0.0.1/js/platform-browser.umd.min.js',
'@angular/platform-browser-dynamic': 'http://127.0.0.1/js/platform-browser-dynamic.umd.min.js',
'@angular/router': 'http://127.0.0.1/js/router.umd.min.js',
'@angular/forms': 'http://127.0.0.1/js/forms.umd.min.js',
'@angular/upgrade': 'http://127.0.0.1/js/upgrade/bundles/upgrade.umd.js',
'rxjs':'http://127.0.0.1/js/vendors.bundle.js'
},
packages: {
'/js': {
defaultExtension: 'js'
}
},
bundles: {
'/js/app.bundle': ['main']
}
});
document.addEventListener('DOMContentLoaded', function () {
System.import('main').then(null, console.error.bind(console));
});
我使用以下 Gulp 脚本将 rxjs 包含在 vendors.bundle.js 中:
gulp.task('vendor.bundle', function() {
gulp.src([
'node_modules/systemjs/dist/system-polyfills.js',
'node_modules/zone.js/dist/zone.min.js',
'node_modules/reflect-metadata/Reflect.js',
'node_modules/systemjs/dist/system.src.js',
'node_modules/rxjs/bundles/Rx.min.js'
])
.pipe(concat('vendors.bundle.js'))
//.pipe(uglify())
.pipe(gulp.dest('./dist/js'));
});
我有如下错误:
VM9314:3GET http://127.0.0.1/js/vendors.bundle.js/add/operator/map.js 404 (Not Found) ... Error loading http://127.0.0.1/js/vendors.bundle.js/add/operator/map.js as "rxjs/add/operator/map" from http://127.0.0.1/services/global-services/global.services
这是一个问题,因为当我们部署整个文件夹时,会生成大量请求以获取所有 rxjs/*.js 文件,这意味着主要在移动设备上的性能不佳。
当我只部署 Rx.min.js 文件时,我没有遇到性能问题。
有人能告诉我如何使用 Angular 2.2 和 SystemJS 部署 rxjs 吗?
最佳答案
感谢@martin! :)
解决方法如下:1. 使用 Gulp(在我的例子中)和 systemjs-builder
构建您自己的 Rx.min.jsvar SystemBuilder = require('systemjs-builder');
gulp.task('rxjs.bundle', function () {
var builder = new SystemBuilder('./', {
paths: {"rxjs/*": "node_modules/rxjs/*.js"},
map: {"rxjs": "node_modules/rxjs"},
packages: {"rxjs": {main: 'Rx.js', defaultExtension: "js"}}
});
builder.bundle('rxjs', 'dist/js/Rx.min.js', {
sourceMaps: true,
minify: true,
mangle: true
});
});
2.在您的SystemJS 配置文件 中声明您的包。
System.config({
map: {
'lodash':'http://127.0.0.1/js/lodash.min.js',
'@angular/core': 'http://127.0.0.1/js/core.umd.min.js',
'@angular/compiler': 'http://127.0.0.1/js/compiler.umd.min.js',
'@angular/common': 'http://127.0.0.1/js/common.umd.min.js',
'@angular/http': 'http://127.0.0.1/js/http.umd.min.js',
'@angular/platform-browser': 'http://127.0.0.1/js/platform-browser.umd.min.js',
'@angular/platform-browser-dynamic': 'http://127.0.0.1/js/platform-browser-dynamic.umd.min.js',
'@angular/router': 'http://127.0.0.1/js/router.umd.min.js',
'@angular/forms': 'http://127.0.0.1/js/forms.umd.min.js',
'@angular/upgrade': 'http://127.0.0.1/js/upgrade/bundles/upgrade.umd.js'
},
packages: {
'/js': {
defaultExtension: 'js'
}
},
bundles: {
'/js/Rx.min.js': [
"rxjs/*",
"rxjs/operator/*",
"rxjs/observable/*",
"rxjs/add/operator/*",
"rxjs/add/observable/*",
"rxjs/util/*"
],
'/js/app.bundle': ['main']
}
});
document.addEventListener('DOMContentLoaded', function () {
System.import('main').then(null, console.error.bind(console));
});
伟大的马丁,我很挣扎,解决方案是在很长的讨论中深入的。我完全错过了:)
更新!
在我测试了该解决方案之后,我可以确认性能得到了极大的提升!!加载我的主页的持续时间大约是 15 秒,现在只有 3 秒!!
关于 Angular 2.2 和 SystemJS : deploy RXJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41102541/
RxJS 中是否有一个运算符可以让我缓冲项目并在信号可观察对象触发时将它们一个一个地放出?有点像bufferWhen,但不是在每个信号上转储整个缓冲区,而是每个信号转储一定数量。它甚至可以转储信号 o
我正在像这样创建我的可观察源(每 5 秒调用一次 api): const obs$ = Observable.interval(5000).switchMap(() => makeApiCall())
我有一个 Action ,然后将触发一个ajax请求。 如果由于某种原因操作失败,我什么也不想做。我没有执行可以执行的无操作功能,而不是创建只返回先前状态的空白操作? export default f
在以下代码中:- RxJS.Observable.of(1,2).first().subscribe((x) => console.log(x);); 给定运营商 first() 是否有必要取消订阅?
我有一种情况,可以在很短的时间内将很多事件发送到流中。我想要一个运算符,它是ojit_code和debounceTime的混合体。 以下演示可用于说明我想拥有的https://stackblitz
我的用例如下:我得到事件,有时会突然发生。如果发生突发,我只需要处理一次即可。去抖动会执行此操作。 但是,去抖动仅给我提供连拍的最后一个元素,但我需要了解连拍中的所有元素才能汇总(使用平面图)。 这可
简化以下代码示例的方法是什么? 我找不到合适的运算符..有人可以举一个简短的例子吗? this.returnsObservable1(...) .subscribe( success =>
在RxJS 6中,如何导入静态合并功能以合并Observable列表? 我希望能够做到: const merged$ = merge( obs1$, obs2$, obs3$
我正在阅读 RxJS 的官方文档,然后我意识到它们都在做完全相同的事情。 对我来说,它们看起来完全相似。 如果有区别请指出。 最佳答案 我将根据它们的 Time 版本来描述它们之间的区别,因为这是我最
我对基本的 RxJS 概念有点熟悉,比如 Observables、Observers 和 Subjects,但是 RxJS Notifications概念对我来说是全新的。 它有什么用?我应该什么时候
从 rxjs 6.5 切换到 rxjs 7 后,我遇到了这个奇怪的错误。我不确定这是 rxjs 7 的类型问题还是 stackblitz ( https://stackblitz.com/edit/r
以前我只能使用此代码导入使用过的运算符: import 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/oper
combineLatest 函数可以从 rxjs 和 rxjs/operators 导入。 当我从 rxjs/operators 导入它时(就像我导入 combineAll 我收到以下错误: TS23
我有一系列事件通过 fromEventPattern 进行像这样: fromEventPattern(addEventHandler).subscribe(ps$); 由于业务怪癖,我预计有时会抛出异
我是 rxjs 的新手,无法解决这个问题: 我有两个流: 一个有传入的对象 ---a----b----c----d-----> 一个是从列表中选择的对象 ----------------c---->
如果一个 observable 完成,我是否仍然需要取消订阅/处置(在 RxJS 中)该 observable 以删除 Observer(防止内存泄漏),或者一旦 onComplete 或 onErr
我有这样的订阅: this.test.subscribe(params => { ...some code }); 如果我传递回调函数而不是箭头函数,则缺少上下文。 我想将上下文绑定(bind)到
我有一个可观察的: messages: string[] = ['a', 'b', 'c']; const source = from(messages) 你如何延迟它,所以当有人订阅它时,它
我可以让 observable 触发一次该值。但我希望它在变量的值发生变化时发生。实际上我需要一个观察者。这就是我认为 observable 的意义所在。观察事物的值(value)或状态并更新订阅它的
我有以下代码: const fetchBook = (bookId: number) => { const title = 'Book' + bookId; console.log('
我是一名优秀的程序员,十分优秀!