标签: systemjs
ES6进口 - 感叹号是什么意思？
我正在关注今天选择ES6模块指南,我注意到他使用的一个导入语句最后有一个感叹号:
import 'bootstrap/css/bootstrap.css!';
这个感叹号是什么意思？
此import语句出现在startup.js文件的第一行.
推荐指数
解决办法
查看次数
使用System.js的性能问题
我正在玩system.js(灵感来自angular2使用它作为他们的教程),但即使对于最琐碎的样本我也会得到可笑的糟糕表现.
例如,以下代码System.import在app.js本地运行时在第二个(前一个)和最后一个(中)console.log 之间有26000ms(!)的延迟(因此没有网络延迟)
index.html的:
<!DOCTYPE html>
<html lang="en">
<head>
<title>System.js Sample</title>
<script>console.log("1: " + new Date().getTime());</script>
<script src="bower_components/system.js/dist/system.js"></script>
</head>
<body>
<script>
console.log('2: ' + new Date().getTime());
System.import('app.js');
</script>
</body>
</html>
App.js:
console.log('3: ' + new Date().getTime());
我通过bower安装了最新的system.js版本("system.js":"~0.18.17")并删除了所有剩余的代码,它实际上只是需要很长时间的System.import调用.那么我做错了什么？
在Chrome下加载页面时,"网络"标签的图片:
推荐指数
解决办法
查看次数
使用SystemJS动态地传输SASS
我阅读了许多说SystemJS和SASS转换工作的博客,但我在网上看到的每个例子似乎都预先处理SASS处理(通过类似gulp的任务运行器),然后JavaScript代码导入生成的CSS.
我希望能够做的是让我的JavaScript文件直接导入SASS文件(并让我的SystemJS加载器在运行中转换为CSS).这仅用于开发目的,对于生产,我计划构建一个包含所有内容的静态文件.这可能吗？如果是这样,通常如何做？
附加信息:我也在使用Angular2和Typescript.
谢谢.
推荐指数
解决办法
查看次数
system.js可以替换require.js
我在一个大项目中使用requirejs.该项目很快将升级为angular2.
Angular2使用system.js,所以我也想切换到system.js.我是否应该能够删除对requirejs库的引用并包含system.js并期望它可以工作,或者是否有一些我在这里不理解的东西？
我尝试删除require.js文件并添加system.js文件,但我收到错误消息,说明定义未定义.你能帮我吗？除了system.js,我还需要require.js吗？
推荐指数
解决办法
查看次数
Angular2.0在子目录中,SystemJS无法导入角度组件
我开始使用Angular2.0.我一直在关注5 Min Quickstart,一切正常,虽然我grunt用来编译我的Typescript和一些Sass等.
我只有一个问题,我自己无法解决.我想将所有公共文件(生成的Javascript和生产节点模块)移动到一个子目录中.我需要这样做,因为我运行不同的应用程序而不是同一个domian.前端取决于登录的用户类型.(后端写入与phalcon)
这是我的公共文件夹(网络服务器的根目录)
所以整个Angular应用程序应该存在于"talent"目录中.
"index.html"包含以下内容:
<script type="text/javascript" src="/talent/node_modules/systemjs/dist/system.src.js"></script>
<script type="text/javascript" src="/talent/node_modules/angular2/bundles/angular2.dev.js"></script>
<script>
System.config({
baseURL: '/talent',
packages: {'app': {defaultExtension: 'js',}}
});
System.import('app/app');
</script>
SystemJs能够正确加载我的app.js文件,然后尝试导入angular2:
import {bootstrap, Component} from 'angular2/angular2';
对应的Javascript:
var angular2_1 = require('angular2/angular2');
这会发送一个请求,http://example.dev/talent/angular2/angular2导致404错误.
当我将node_modules文件夹和app文件夹移动到web服务器的根目录并删除baseURL: '/talent'它时工作得很好.
以下是对工作解决方案(根本上的所有内容)和不工作部分(/ talent下的所有内容)的请求
工作:
不工作:
你能帮助我开始工作吗？
推荐指数
解决办法
查看次数
让Karma使用SystemJS,Angular2和Typescript的问题
我正面临着让Karma使用SystemJS,Angular2和Typescript的问题.
这是我的karma.conf.js:
'use strict';
module.exports = function (config) {
config.set({
// base path, that will be used to resolve files and exclude
basePath: '.',
// frameworks to use
frameworks: ['systemjs', 'jasmine'],
plugins: ['karma-systemjs', 'karma-jasmine', 'karma-phantomjs-launcher'],
files: [
'node_modules/reflect-metadata/Reflect.js',
'app/**/*.spec.ts',
//'jspm_packages/system-polyfills.js',
'karma-test-shim.js'
],
systemjs: {
configFile: "systemjs.config.js",
config: {
//baseURL: ".",
transpiler: "typescript",
paths: {
"systemjs": "jspm_packages/system.js",
"system-polyfills": "jspm_packages/system-polyfills.js",
"typescript": "node_modules/typescript/lib/typescript.js"
},
packages: {
'app': {
defaultExtension: 'ts'
}
}
},
includeFiles: [
'node_modules/reflect-metadata/Reflect.js'
],
serveFiles: [
'app/**/*.ts',
'main-bundle.js'
]
}, …推荐指数
解决办法
查看次数
Angular 2 bundle就像导入/导入多个模块一样
我不知道如何陈述问题......所以,基本上我正在使用带有Typescript的Angular 2编写我自己的应用程序.我希望能够像我们使用Angular一样导入模块,我们可以在一行中导入多个相关模块.例如,我们可以在angular2 beta中执行此操作:
import { Component, OnInit, Input } from 'angular2/core';
我想用我的应用程序做类似的事情.例如:
import { UserService, RoleService } from 'my-project/services';
此外,我希望能够为模型,管道,组件等做同样的事情......
还有一件事,文件夹结构将是这样的:
src/app/services
src/app/components
src/app/models
src/app/pipes
我试图做的事情:在路径src/app上,我在文件中创建了每个'bundle',比如services.d.ts,models.d.ts,pipes.d.ts ......然后我试着映射SystemJS配置,如下所示:
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'src/app', // 'dist',
'rxjs': 'node_modules/rxjs',
'my-project/components': 'src/app/components',
'my-project/services': 'src/app/services',
'my-project/models': 'src/app/models',
'my-project/pipes': 'src/app/pipes',
'@angular': 'node_modules/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = { …推荐指数
解决办法
查看次数
JavaScript拦截模块导入
我有一个使用SystemJS的SPA(在Aurelia/TypeScript中,但这无关紧要).让我们说它运行于http://spa:5000/app.
它有时会像waterservice/external.js外部URL一样按需加载JavaScript模块http://otherhost:5002/fetchmodule?moduleId=waterservice.external.js.我用SystemJS.import(url)它做这个,它工作正常.
但是当这个外部模块想要导入另一个模块时,import { OtherClass } from './other-class';这个(可理解的)不起作用.当它被SPA加载时,它会看到http://spa:5000/app/other-class.js.在这种情况下,我必须拦截路径/位置以将其重定向到http://otherhost:5002/fetchmodule?moduleId=other-class.js.
注意:waterservice/external.ts作品查找的Typescript编译因为typescript编译器可以./other-class.ts轻松找到.显然我不能使用绝对URL进行导入.
如何拦截我使用SystemJS导入的模块内的模块加载？
我已经测试过的一种方法是在SystemJS配置中添加映射.如果我像它一样导入它import { OtherClass } from 'other-class';并添加一个像"other-class": "http://otherhost:5002/fetchmodule?moduleId=other-class"它一样的映射.但是如果这种方法很好,我怎样才能在运行时动态添加映射？
其他方法,如通用加载URL拦截也是受欢迎的.
更新
我尝试拦截SystemJS,就像这样的artem
var systemLoader = SystemJS;
var defaultNormalize = systemLoader.normalize;
systemLoader.normalize = function(name, parentName) {
console.error("Intercepting", name, parentName);
return defaultNormalize(name, parentName);
}
这通常不会改变任何东西,只会产生一些控制台输出以查看正在发生的事情.不幸的是,这似乎改变了一些东西,因为我得到一个错误未捕获(在承诺中)TypeError:this.has不是一个函数内部system.js.
然后我尝试添加映射SystemJS.config({map: ...});.令人惊讶的是,这个函数是增量的,所以当我调用它时,它不会松开已经提供的映射.所以我可以这样做:
System.config({map: {
"other-class": `http://otherhost:5002/fetchModule?moduleId=other-class.js`
}});
这不适用于相对路径(以 …
推荐指数
解决办法
查看次数
如何在Systemjs构建器任务中包含zone.js,reflect-metadata等？
我正在使用system.js和systemjs builder来创建一个dist文件夹,其中包含我的angular2应用程序的所有打包的javascript文件.
它工作得非常好,除了它不包括以下文件,这些文件目前静态包含在index.html中:
- node_modules/zone.js/DIST/zone.js
- node_modules /反映元数据/ Reflect.js
- node_modules/systemjs/DIST/system.src.js
- node_modules/ESRI系统-JS/DIST/esriSystem.js
如何强制systemjs构建器包含这些依赖项？
库-bundle.js:
var SystemBuilder = require('systemjs-builder');
var builder = new SystemBuilder();
builder.loadConfig('./systemjs.config.js').then(function() {
return builder.bundle(
'app - [app/**/*]', // build app and remove the app code - this leaves only 3rd party dependencies
'dist/libs-bundle.js'
);
}).then(function() {
console.log('library bundles built successfully!');
});
APP-bundle.js
var SystemBuilder = require('systemjs-builder');
var builder = new SystemBuilder();
builder.loadConfig('./systemjs.config.js').then(function() {
return builder.bundle(
'app - dist/libs-bundle.js', // build the app only, exclude everything already included in …推荐指数
解决办法
查看次数
理解没有角度的TypeScript和SystemJS
我最近一直在用TypeScript研究和做简单的"hello worlds".有些事我认为我无法解决这个问题,那就是如何将System.js与TypeScript一起使用.互联网上的每一个教程或演示都是关于Angular2的,我还不想参与Angular 2.
举个例子,我有以下项目结构:
RootFolder
|
| _lib
| ...... ts (where .ts files are)
|
| components (where compiled .js files are)
| libraries
| ......... systemjs (where system.js is)
|
| index.html
| tsconfig.json
我的tsconfig.json文件看起来像:
{
"compileOnSave": true,
"compilerOptions": {
"noImplicitAny": true,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"module": "system",
"moduleResolution": "node",
"outDir": "./components"
},
"exclude": [
"node_modules",
"wwwroot"
],
"include": [
"./_lib/ts/**/*"
]
}
TypeScript编译按预期工作,没有问题.我创建了一个名为"Alerter"的简单类,其中包含以下代码:
//alerter.ts
class Alerter {
showMessage(): void {
alert("Message displayed.");
} …推荐指数
解决办法
查看次数
标签 统计
systemjs ×10
angular ×5
javascript ×4
typescript ×4
ecmascript-6 ×2
amd ×1
es6-modules ×1
gruntjs ×1
jspm ×1
karma-runner ×1
module ×1
optimization ×1
performance ×1
requirejs ×1
sass ×1