我最近一直在编写很多ES6,使用import {variable} from 'ES6module'语法,并使用traceur-compiler在浏览器中编译代码.我开始关注systemjs,因为它似乎可能允许我使用相同的语法来导入AMD,commonJS 和 ES6模块.
尽管如此,阅读文档已经开始让我感到困惑.我看到很多异步调用System.import('path/to/module').then(function(variable) { ... }),我不习惯用于依赖项导入.
我已经阅读了ES6模块的实用工作流程,其涵盖了许多不同的工作流程,其中没有一个涉及在运行时导入ES6模块和 AMD/commonjs模块.我在想这样的事情:
import {myObject} from 'my/es6/module';
import {_} from 'lib/underscore';
或者如果不是,至少:
import {myObject} from 'my/es6/module';
var _ = require('lib/underscore');
systemjs是否可以使用其中任何一个？
我正在尝试让TypeScript使用默认的Aurelia骨架,它基于System.JS作为加载器.
我无法让TypeScript接受模块导入.我将其中一个骨架文件"nav-bar.js"重命名为"nav-bar.ts",看看我是否可以将该示例转换为TypeScript.代码导致编译器错误:"错误:(5,24)TS2307:找不到外部模块'aurelia-framework'."
import {bindable} from "aurelia-framework";
export class NavBar {
//noinspection ES6Validation
@bindable router = null;
}
如何让TypeScript将aurelia-framework视为有效的导入？在项目的根目录中有一个名为config.js的文件似乎描述了"aurelia-framework"的具体位置,但TypeScript不知道如何加载它.
在此先感谢您的帮助.
我创建了一个示例Angular2应用程序,其中一个模块使用外部库(其余),如下所示:
/// <reference path="../../typings/tsd.d.ts" />
import rest = require('rest');
import jsonpClient = require('rest/client/jsonp');
import mime = require('rest/interceptor/mime');
...
我用过
tsd install rest
将rest.d.ts放在"typings"目录中,并使用过
bower install rest
获取运行时版本(这在任何地方都没有解释.我假设我必须做这样的事情？)
我已经设置了我的gulp脚本,将两个目录从bower_components("rest"及其依赖"when")复制到dist/lib中
应用程序本身编译良好,但在浏览器中,它无法解析其余/何时模块依赖.
我已经添加了
System.config({
"baseURL": "/",
"transpiler": "traceur",
"paths": {
"components/*": "components/*.js",
"provider/*": "provider/*.js",
"services/*": "services/*.js",
"model/*": "model/*.js",
"rest": "lib/rest/rest.js",
"rest/*": "lib/rest/*.js",
"when": "lib/when/when.js",
"when/*": "lib/when/*.js",
"*": "lib/*.js"
}
});
到我的index.html文件,我可能继续将文件添加到该列表,但不知何故,这感觉......错了.
当然,我必须在index.html中列出每个包的内部文件结构,这是不对的？我看到"when"模块假定在"./lib"中找到自己的依赖项,其中"rest"具有完全不同的结构.
所以,我的问题是:
我怎么误解了如何将通过bower(或npm)管理的javascript包导入到Angular2的客户端？
我是否真的需要列出System.paths中每个模块的每个文件才能使其工作？
在尝试让Angular(1.x)使用systemjs时,我意识到目前没有能力(我知道)自动插入$inject到角度组件中,即使函数的参数受到损坏,这也会使组件保持工作状态.缩小器.手动创建$inject注释很繁琐,容易出错并且违反了DRY主体.
有一个成熟的npm模块ng-annotate,它可以解决这个问题并在许多类似的情况下用于捆绑.正如我一直在探索SystemJS,我发现有一个插件系统包含翻译源代码的能力,这正是ng-annotate它的作用.
但是,从我所看到的,SystemJS只能让您将特定文件扩展名映射到单个加载器,并且所有插件示例都支持新的文件类型.我想做的是对SystemJS的转换过程的输出进行后处理,而不是添加新的文件类型.似乎SystemJS应该能够做到这一点,因为它有一个处理管道,但我无法弄清楚如何以正确的方式挂钩它.现在我使用Browserify来达到同样的效果,但我最终得到了一组相当复杂的构建任务,如果可能的话我想用SystemJS简化它.
其他策略也可以ng-annotate在SystemJS的加载器管道中使用.
使用SystemJS,如何指定一个库依赖于另一个库？例如,Bootstrap JavaScript库依赖于jQuery.基于SytemJS文档,我假设我将使用System.config.meta属性指定此依赖项:
System.config({
baseUrl: './scripts',
defaultJSExtensions: true,
map: {
jquery: './lib/jquery-2.2.0.min.js',
bootstrap: './lib/bootstrap.min.js'
},
meta: {
bootstrap: {
deps: ['jquery']
}
}
});
System.import('./scripts/app.js');
但这似乎没有效果.当我运行我的应用程序时,Bootstrap库会抛出一个Bootstrap's JavaScript requires jQuery错误 - 这意味着在jQuery之前加载了Bootstrap.
如何确保在Bootstrap之前始终加载jQuery？
当我加载我的typescript angular 2测试应用程序时,它没有按预期加载.
我总是看到"正在加载..."索引html文件中的my-app是什么.
在bowser控制台中我也没有错误:/
有人看到错误吗？
指数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
<script src="~/lib/es6-shim.js"></script>
<script src="~/lib/es6-promise.js"></script>
<script src="~/lib/system-polyfills.js"></script>
<script src="~/lib/angular2-polyfills.js"></script>
<script src="~/lib/system.js"></script>
<script src="~/lib/Rx.js"></script>
<script src="~/lib/angular2.js"></script>
<script src="~/lib/http.dev.js"></script>
<script src="~/lib/router.dev.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
main.ts
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {provide} from 'angular2/core';
import {bootstrap, ELEMENT_PROBE_PROVIDERS} from 'angular2/platform/browser';
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component' …我正在使用SystemJS加载器(使用commonJS模块,但这不重要),主要是直接访问下的组件node_modules.
现在在运行时,是否可以从相对的环境中查找当前环境中的绝对路径？
即如果我这样做require('./myComponent')将获取,http://localhost:3000/app/myComponent.js但万一通过npm install(因此驻留node_modules)安装此组件,SystemJS将正确加载http://localhost:3000/node_modules/dist/myComponent.js.有没有办法从相对的路径中查找这个绝对路径？
就是这样的var absPath = SystemJS.lookup('./myComponent')？
有人有一个工作示例,其中SystemJS(不是Webpack)与Angular2(在TypeScript中,而不是Dart)与Cesium(npm)一起使用？
我知道cesiumjs网站上的这篇博文:https://cesiumjs.org/2016/01/26/Cesium-and-Webpack/
我喜欢作者的说法,"你不能简单地做一个require('cesium')." 该文章的问题在于它使用Webpack方式,而我没有.
无论哪种方式,我希望解决这个特定的错误(来自浏览器):
Error: (SystemJS) AMD module http://localhost:3000/node_modules/cesium/Build/CesiumUnminified/Cesium.js did not define
这就是我所拥有的:
在我的systemjs.config.js档案中:
paths: {'npm:' : 'node_modules/'},
map: {
// our app is within the dist folder
app: 'dist',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
...
'require': 'npm:requirejs/require.js',
'cesium': 'npm:cesium/Build/CesiumUnminified/Cesium.js',
// Other packages
...
}
@Injectable() 例:
let Cesium = require('cesium');
import { Injectable } from '@angular/core';
@Injectable()
export class CesiumClock {
private _start:any = Cesium.JulianDate.now();
private _stop:any = Cesium.JulianDate.addHours(this._start,12,new Cesium.JulianDate());
private _clock:any …我有一个angular2应用程序,其中包含使用SystemJS的打字稿; 我使用了以下种子应用程序.
在桌面上,您可以看到标签之间的加载文本(例如Loading...).
在我的索引页面上,我有一个小的加载div来显示我的应用程序在首次加载时速度很慢.
但这div并没有在移动设备上显示出来.
索引代码
<app>
<header>
<nav>
<div class="container col-sm-10 col-sm-offset-1">
<div class="navbar-header">
<a class="navbar-brand col-xs-3 col-xs-offset-1">
<img src="./assets/logo.png" />
</a>
</div>
</div>
</nav>
</header>
<div class="bounceInDown animated">
<div class="loading-wrapper animated fadeIn">
<p class="loading-text">Hold on!<br />We're unpacking...</p>
<div class="loading-icon preload"></div>
</div>
</div>
</app>
如果您需要更多代码示例,请与我们联系.
我基本上希望这些标签div内部app能够在移动设备上显示; 我也对任何jQuery移动技巧持开放态度.
它似乎是keyframe.你能让我知道什么是错的吗？
CSS和关键帧代码
.loading-icon {
animation: scaleout 1.0s infinite ease-in-out;
background-color: #ffffff;
border-radius: 100%;
display: inline-block;
height: 40px;
margin: …我需要从内存变量中导入JavaScript模块。我知道可以使用SystemJS和Webpack来完成。
但是我在任何地方都找不到合适的工作示例或文档。这些文档主要讨论动态导入.js文件。
基本上我需要像下面那样导入模块
let moduleData = "export function doSomething(string) { return string + '-done'; };"
//Need code to import that moduleData into memory
如果有人可以指向文档，那将是很棒的
systemjs ×10
angular ×5
javascript ×5
typescript ×4
commonjs ×2
node.js ×2
amd ×1
angularjs ×1
aurelia ×1
cesium ×1
ecmascript-6 ×1
jspm ×1
module ×1
ng-annotate ×1
webpack ×1