标签: jspm

运行jspm bundle-sfx some/input some/output.js不会将我的代码从ES6转换为ES5.这使输出文件不可用.

输入文件的示例内容:

[1,2,3,4].map((i)=>i*i);

我尝试使用system.js从Webpack迁移到JSPM.我们有简单的App组件.我正在阅读这篇文章Angular 2 Starter Setup with JSPM,SystemJS和Typescript in atom(第1部分)

import {Component} from 'angular2/core';
import {Bus} from './business.service';

@Component({
  selector: 'app',
  template: `
  <p>Hello World</p>
  `,
  providers:[Bus]
})
export class App {
  constructor(private bus : Bus) { }
}

和简单(商业)服务 Http

import {Injectable} from 'angular2/core';
import {Http, Response, Headers, RequestOptions} from 'angular2/http';
import {Observable}     from 'rxjs/Observable';

@Injectable()
 export class Bus {

  constructor(private http: Http){

  }
}

在Webpack工作正常但在这里使用systemjs我收到此错误

例外:没有Http的提供者!(App - > Bus - > Http)

我读过Angular2没有NameService的提供者,但是他们谈论的是Angular2 alpha而且提供者中没有提供者,我们使用beta @ 7

我也玩 …

我刚刚将源文件简化为下面,当我在脚本标记中使用System.import时,它工作正常.

import angular from "angular";

angular.element(document).ready(function () {
    alert('Hello word');;
});

下面是我的config.js

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "typescript",
  paths: {
    "npm:": "jspm_packages/npm/"
  },

  map: {
    "angular": "npm:angular@1.5.2",
    "typescript": "npm:typescript@1.8.9"
  }
});

我有一个gulp任务来构建它:

gulp.task('bundle:js', ['clean:js'], function () {

    var builder = new Builder();
    builder.loadConfig('./config.js').then(function () {
        var destination = paths.coreJsDest;
        builder.buildStatic(paths.srcRoot + 'js/ng/homepage', destination, {
            minify: false,
            sourceMaps: false,
           runtime: false
        });
    });
});

但是输出文件包含文件名而不是文件中的JavaScript及其导入:

(["1"], ["1"], function($__System) {

})
(function(factory) {
  if (typeof define == 'function' && …

我找到了npm模块google-maps-api并安装了它(npm install google-maps-api)但是我无法弄清楚如何用systemjs/jspm导入它(jspm找不到这个模块).这是我的config.js的配置:

"paths": {
"*": "app/dist/*.js",
"github:*": "app/jspm_packages/github/*.js",
"npm:*": "app/jspm_packages/npm/*.js" }

所以,当我尝试做这样的事情时:

import {mapsapi} from 'google-maps-api';

我在浏览器控制台中收到以下错误:

GET https:// localhost:44308/app/dist/google-maps-api.js 404(未找到)

看看文件系统,我看到npm在app/node_modules/google-maps-api下安装了模块,那么如何在Aurelia模块的import子句中引用它呢？

所以我做了:

$ jspm install github:Eonasdan/bootstrap-datetimepicker
$ jspm install npm:moment

然后在我的js文件的顶部我做了:

import moment from 'moment';
import {datepicker} from 'eonasdan/bootstrap-datetimepicker';
import 'eonasdan/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css!';

在我的浏览器中它正在寻找/dist/eonasdan/bootstrap-datetimepicker.js哪个返回a 404,为什么不使用系统映射来找出实际文件所在的位置？或者它应该做什么....

作为旁注,它不会moment.js像它应该的那样去做

我使用Karma(v0.12.37)作为测试运行器和JSPM(v0.16.2).我在karma中添加了以下代理配置,以便允许正确加载JSPM文件:

proxies: {
    '/base/jspm_packages/': '/base/app/jspm_packages/'
}

这个没有用,并且失败了:

PhantomJS 2.0.0 (Windows 8 0.0.0) ERROR: 'Potentially unhandled rejection [10] Error: XHR error loading http://localhost:9876/base/jspm_packages/npm/babel-core@5.8.22.js
        Error loading http://localhost:9876/base/jspm_packages/npm/babel-core@5.8.22.js
        Error loading http://localhost:9876/base/app/pages/examples/todo-example/todo.controller.test.js'

调试日志给出:

proxying request - /base/jspm_packages/npm/babel-core@5.8.22.js to localhost:9876
/base/app/jspm_packages/npm/babel-core@5.8.22.js { host: 'localhost',
  port: 9876,
  baseProxyUrl: '/base/app/jspm_packages/',
  https: false }

但是包含'app'的以下网址正常工作:

http:// localhost:9876/base/app / jspm_packages/npm/babel-core@5.8.22.js

什么是错的任何线索？

我一直在努力尝试从Twitter Bootstrap下载较少的文件.根据jspm文档,他们将下载发行版的zip文件而不是存储库中的源代码.在Twitter Bootstrap中,zip文件没有更少的文件,所以我理解为什么当我做类似的事情时,我没有得到它们:

jspm install github:twbs/bootstrap@3.3.4

但是,为了避免这种限制,我将Twitter Bootstrap分叉以避免这些自定义发布文件.当我进入我的fork中的发布部分并下载文件时,它看起来不错,但是当我尝试安装它时,我得到了和以前一样的文件.

我做了一个干净的缓存,创建了一个不同的分支,在基于v3.3.4等的新分支上进行了更改等.我总是得到相同的v3.3.4文件集而没有更少的文件.

有谁知道jspm如何确定下载什么以及为什么它可能在twbs/bootstrap中下载发布文件而不是我的fork中的那个？

我开始在我的Aurelia网络项目中使用JSPM,我想知道使用它是否有任何后果或优势import "<client side library>"？

我见过JS类中客户端库的代码:

import "jquery";
import "bootstrap/css/bootstrap.css!"
import "bootstrap";

export class App {
    constructor {

    }
}

问题:以这种方式导入它与文件中的传统包含<script>和<link>标记相反有什么区别/优点/缺点.html？

<html>
<head>
   <link rel="stylesheet" src="<bootstrap path>/bootstrap.css">
</head>
<body>

   <script type="text/javascript" src="<bootstrap path>/bootstrap.js"></script>
</body>
</html>

我的试验和错误告诉我,通过import在特定的类/ js文件中使用,它将库限制为该特定视图文件,而不是全局可用.

最后,当你为生产构建这些项目时,这些库是否需要存在于index.html中？

我正在尝试使用Aurelia和Typescript建立一个新项目.

我按照我在网上找到的最新指示.使用vs模板创建项目后,我在项目根目录中运行了jspm init,并将baseurl配置为wwwroot.我遇到的第一个问题是VS拒绝将jspm_packages作为项目中的文件夹.所以,我再次运行jspm并将packages文件夹更改为wwwroot/lib.
这似乎有效,但打字稿不会让我导入任何Aurelia包.我下载骨架项目进行比较.我注意到两件事,骨架使用旧版本的Aurelia,而不是我使用jspm install时得到的版本.其次,使用.d.ts文件下载软件包.我怀疑丢失的.d.ts文件导致了intellisense的问题.

到目前为止,我一直无法弄清楚如何让jspm给我旧版本,我已经尝试更改package.json文件以匹配骨架应用程序中的内容,但是当我运行jspm install时,我总是得到最新版本.

是否已从jspm软件包中删除了这些类型？这项工作的正确工作流程是什么？

我正在使用Aurelia，我想用谷歌地图渲染一张基本地图。

我尝试了 Aurelia-Google-Maps ( https://github.com/Vheissu/aurelia-google-maps )，但无法使其正常工作（一切都正常加载，但<google-map>我模板上的元素未呈现为一张地图）。我现在正在尝试使用Google-Map-API，因此我可以正常加载所有内容，创建一个 Map 对象，但是当我尝试添加属性时，出现错误：

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

我根本不知道我的错误来自哪里。

这是我的代码（accueil.js——一个控制器）

import {inject} from 'aurelia-framework';
import mapsapi from 'google-maps-api';

@inject(mapsapi('myApiKey'))

export class Accueil {
    constructor(mapsapi) {
        mapsapi.then(function(maps) {
            var map = new maps.Map((document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644}, // just random values
                zoom: 8
            })); // doesn't work
        });
    }
}

非常感谢，