标签: jspm

如何鲍尔不同于JSPM？Bower能否提供有关SystemJS通用模块加载器的 jspm功能？

我正在尝试学习Typescript.虽然我认为它不相关,但我正在使用VSCode进行此演示.

我有一个package.json包含这些内容的部分:

{
  "devDependencies": {
    "gulp": "^3.9.1",
    "jspm": "^0.16.33",
    "typescript": "^1.8.10"
  },
  "jspm": {
    "moment": "npm:moment@^2.12.0"
  }
}

然后我有一个这样的Typescript类main.js:

import moment from 'moment';
export class Main {
}

我gulpfile.js看起来像这样:

var gulp = require('gulp');
var typescript = require('gulp-tsb');
var compilerOptions = {
                        "rootDir": "src/",
                        "sourceMap": true,
                        "target": "es5",
                        "module": "amd",
                        "declaration": false,
                        "noImplicitAny": false,
                        "noResolve": true,
                        "removeComments": true,
                        "noLib": false,
                        "emitDecoratorMetadata": true,
                        "experimentalDecorators": true
                      };
var typescriptCompiler = typescript.create(compilerOptions);
gulp.task('build', function() {
  return gulp.src('/src')
    .pipe(typescriptCompiler()) …

我在使用Angular2和SystemJS运行以下版本的JSPM时遇到以下问题(版本:Angular@2.0.0-alpha.27,JSPM @ 0.16.0-beta.2和SystemJS@0.18.0)曾经的打字稿是编译(没有错误)我在浏览器中收到以下错误:

/jspm_packages/npm/angular2@2.0.0-alpha.27/src/util/decorators.js:70 Uncaught reflect-metadata shim is required when using class decorators

现在,当我手动包含文件Reflect.js:\ jspm_packages \npm\reflect-metadata@0.1.0\Reflect.js时,问题就消失了但是下一个问题出现了,说明列表在另一个角度文件中是未定义的.

从system.js和typescript/jspm.io看到下面的bitbucket src中的配置文件(src代码)

https://bitbucket.org/schippie/angular-2-jspm-hello-world/src/8af83f2066e5e3e9eede7db495545234f3b0c04a

我想知道的是,如果它现在甚至可以使用jspm和system.js来检索角度正常运行所需的所有角度包.看作system.js的配置确实明确指出angular取决于它:

"npm:angular2@2.0.0-alpha.27": {
  "fs": "github:jspm/nodelibs-fs@0.1.2",
  "path": "github:jspm/nodelibs-path@0.1.0",
  "process": "github:jspm/nodelibs-process@0.1.1",
  "reflect-metadata": "npm:reflect-metadata@0.1.0",
  "rx": "npm:rx@2.5.1",
  "url": "github:jspm/nodelibs-url@0.1.0",
  "zone.js": "npm:zone.js@0.5.1"
},

但它们未被检索(查看网络选项卡)

我在我的Angular 2项目中使用带有SystemJS的Typescript进行模块加载,使用Gulp进行任务运行.项目中当前版本的Angular是RC2,但RC1也存在问题.我在这里遵循了brando的答案.

捆绑我的应用程序和初始加载网站SystemJS后抛出错误:

错误:http:// localhost:57462/app/app.bundle.js被检测为寄存器但未执行.

该应用程序工作,但控制台中的错误绝对不是一件好事.

我在空项目上测试了我的配置,问题再次出现,所以我认为问题在于配置.

这里是:

Gulpfile

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var typescript = require('gulp-typescript');
var jspm = require('gulp-jspm-build');

gulp.task('compile:ts', function () {
    return gulp.src(['./appTS/**/*.ts'])
        .pipe(sourcemaps.init())
            .pipe(typescript({
                noEmitOnError: true,
                target: 'ES5',
                removeComments: false,
                experimentalDecorators: true,
                emitDecoratorMetadata: true,
                module: 'system',
                moduleResolution: 'node'
            }))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./app/'));
});

gulp.task('copy:vendor', function () {
    return gulp.src([
        'node_modules/systemjs/dist/system-polyfills.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/core-js/client/shim.min.js',
        'node_modules/zone.js/dist/zone.min.js',
        'node_modules/systemjs/dist/system.js',
        'node_modules/rxjs/bundles/Rx.js'
    ]).pipe(gulp.dest('./assets/vendor/'));
});

gulp.task('bundle:app', ['compile:ts'], function () {
    return jspm({ …

我正在尝试使用TypeScript和jspm&system.js来引导Web应用程序以进行模块加载.我没有走得太远.安装jspm后,用它来安装jQuery:

jspm install jquery

基础知识:

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
        System.import('main');
</script>

main.ts:

import $ from "jquery";

export class Application  {
    constructor() {
        console.log($);
    }
}

TypeScript将无法编译,因为"Module'jquery'没有默认导出.

生成的config.js具有正确的映射:"jquery":"npm:jquery@2.2.0"

一直在研究ES6,JSPM和angular2一周,我找到了这个repo ES6-loader

如果我们查看底部脚本中的index.html,您会看到

 System.import('reflect-metadata')
  .then(function() {
    return System.import('app/index');
  })
  .catch(console.log.bind(console));

这是使用JSPM的systemjs polyfill来获取ES6 import.

问题: 在这种情况下,反射元数据到底是做什么的？npm reflect-meta我阅读的文档越多,我就越不了解它的作用吗？

我知道我可以通过运行来安装npm包jspm:jspm install npm:<pkg-name>这将允许我在开发中使用它(例如在我的JS文件中:) import myPackage from 'myPackage';.

如果包的package.json文件npm包含依赖项,我希望它也能在包中安装它们.所以在那个包文件夹中,我希望有一个包含的node_modules文件夹.但是,当我运行命令来安装npm软件包时,它不会安装node_modules,我将不得不手动转到该文件夹​​并运行npm install以显示这些文件夹.这意味着我无法在不手动运行此命令的情况下引用程序包本身中的其他文件/依赖项.有什么我可以通过运行jspm来确保这些安装吗？

当我jspm install在Aurelia项目中运行JS依赖项时,jspm说Github rate limit reached

怎么修？

我正在尝试使用JSPM从NPM安装backbone.marionette以进行客户端依赖性解析.使用commandprompt中的以下命令进行简单操作:

jspm install marionette = npm:backbone.marionette

除了jquery之外的所有依赖项都会自动下载和安装.但是我收到运行时错误:

无法调用延迟未定义.

我正在查看代码,我发现问题出现在主干源代码行9,10和11中

} else if (typeof exports !== 'undefined') {
  var _ = require("underscore");
  factory(root, exports, _);

在运行时traceurJS,factory-method从这里调用,很明显,最后一个参数$被省略了.当我查看github上的主干源代码时,相同的行看起来像这样:

} else if (typeof exports !== 'undefined') {
var _ = require('underscore'), $;
try { $ = require('jquery'); } catch(e) {}
factory(root, exports, _, $);

这里使用选项(try/catch)添加jquery依赖项.我必须在此添加,NPM版本标记与GitHub - 1.1.2相同的版本.

为什么不同？ 好像这已经成为问题一段时间了,发布了一些解决方法,比如在代码中添加这个:

$           = require('jquery');
Backbone    = require('backbone');
Backbone.$  = $

我不喜欢这个,虽然它有效,因为它是一种解决方法,似乎它"不存在".

打电话的目的是什么？

if (typeof window !== 'undefined') 

我在JSPM plugin-css和其他一些库中看到过它.