标签: jspm

我正在尝试使用Typescript和jspm来创建一个有角度的应用程序.问题是当你想确保.js加载文件时,在jspm中你必须编写一个导入,并确保在运行代码之前加载文件.但是Typescript删除了我的导入.这是我编写的Typescript代码.我必须加载angular-new-router然后将其添加到我的模块依赖项.

import angular = require('angular');
import MainController = require('./controllers/MainController');
import NgNewRoute = require('angular-new-router');

console.log(angular.version);

var appModule = angular.module('app', ['ngNewRouter']);
MainController.register(appModule);

export = appModule;

我的问题:如何指示Typescript不删除我的import语句,或者我必须做其他事情以确保我的路由器加载？

PS:我用commonjs将我的打字稿代码编译成ES5.

编辑:这个问题与TypeScript不同:导入模块只有语句.我有这个问题与第三方库一起工作,所以我不想改变它们.我也使用commonjs模式,所以amd-dependency不解决我的问题!

编辑2:另一个问题是我的Typescript代码中不能要求js模块以外的文件.

我正在进入System.js和JSPM,我已经到了想要将我的TypeScript源代码捆绑到JavaScript包中的地步.

现在,我可以将生成的JavaScript代码捆绑为: jspm bundle some/source/path someDestFile.js

但是我需要首先将我的所有TypeScript预先构建到JavaScript中,然后捆绑,找到自己留下的所有已编译(和分离)的JS文件.这远非理想!

我在这里浏览了jspm文档,但没有找到解决方案.

为了清楚起见,我不想在我的浏览器中编译TypeScript,而是预编译的实体JavaScript包.

我该怎么做呢？

PS我用的打字稿transpiler安装所看到这里

有没有.bowerrc等价的jspm？当我运行时jspm install,我希望jspm将软件包安装到client/jspm_packages文件夹中.

如何配置jspm来更改jspm_packages文件夹的位置？

谢谢

我在Aurelia应用程序中写了以下内容

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

我希望app.css位于第二位,因为它会覆盖bootstrap.css样式.但是,我首先得到app.css,因为我假设system.js加载器并行运行它们,因为app.css是它首先加载的两个中较小的一个.

有没有办法在jspm中定义这两个文件之间的依赖关系来控制它们的加载顺序是否还有其他一些方法？

提前谢谢了!:)

我正在尝试使用Visual Studio 2015中的Web部署([右键单击] - >发布)将基于ASP.NET 5 ES2016导航框架的Aurelia应用程序部署到Microsoft Azure .

但我无法让解剖工作.

我已将文件中的prepublish设置更改project.json为:

"prepublish": [ "npm install", "gulp bundle" ]

但这只会使Visual Studio中的发布过程失败.gulp bundle从控制台运行工作正常.

所以我的下一次尝试是删除所有prepublish任务,gulp bundle手动运行然后发布.这允许发布过程完成,但是azure上的web应用程序从不加载并最终给我一个超时.

认为它可能与jspm_packages我试过的文件夹有关,包括Web.xproj基于这个github线程的文件中的文件夹,但是这会导致以下错误:

502 - Web server received an invalid response while acting as a gateway or proxy server.

更新

我已经尝试重新设置prepublish脚本并dnu publish从控制台运行.运行没有问题广告生成\bin\output\wwwroot文件夹中的所有必要输出.但是,当从Visual Studio中的Publish contect-menu操作运行时,同样的过程会失败; 没有生成输出.

只需将其添加到此处,以防它对问题有所了解.

更新2

好的,我注意到dnu publish命令的结束消息是 …

我一直在使用bower与wiredep相结合,但我想切换到使用System.js加载器.为此,JSPM是理想的.然而,bower和wiredep的组合为我做的一件事还包括(S)CSS.

JSPM是否处理这些文件？或者我是否应采取不同的方法来处理这些文件？

我一直在我的angularjs 1.5和jspm设置上设置karma和jasmine.首先来自karma的所有错误跟踪日志都来自systemjs,这使得调试变得更加困难.即使我的所有承诺都处理拒绝,我也会收到很多可能未处理的拒绝消息.

ERROR LOG: 'Potentially unhandled rejection [5] 
tryCatchReject@http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:1252:34
runContinuation1@http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:1211:18
when@http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:999:20
run@http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:1109:28
_drain@http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:166:22
drain@http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:131:15'
ERROR LOG: 'Potentially unhandled rejection [6] 
tryCatchReject@http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:1252:34
runContinuation1@http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:1211:18
when@http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:999:20
run@http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:1109:28
_drain@http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:166:22
drain@http://localhost:9020/base/jspm_packages/system-polyfills.src.js?3aa57969dce4ecea4c51aab540f372d15cc886b6:131:15'

  MyService
      ? should do the thing
    Expected 3 to equal 2.
    tryCatchReject@/var/www/html/loyaltyone/src/jspm_packages/system-polyfills.src.js:1252:34
    runContinuation1@/var/www/html/loyaltyone/src/jspm_packages/system-polyfills.src.js:1211:18
    when@/var/www/html/loyaltyone/src/jspm_packages/system-polyfills.src.js:999:20
    run@/var/www/html/loyaltyone/src/jspm_packages/system-polyfills.src.js:890:17


PhantomJS 2.1.1 (Linux 0.0.0): Executed 46 of 46 (1 FAILED) (0.205 secs / 0.028 secs)

我有办法有更好的跟踪日志与错误？

我希望能够使用异步加载依赖项System.import(),但不必在生产运行时将ES6转换为ES5.我希望将这些模块转换为单独的ES5模块,这些模块仅在需要时才能获取.我不希望它们成为主要包的一部分.

开发工作流程

这些模块在我的生产构建期间有效加载,这实际上令人担忧,因为我不想包含任何允许转换的依赖项.

我有一个工作流程,我正在使用jspm bundle并jspm unbundle在开发和生产配置之间切换.在我的开发环境中,我包括以下脚本:

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>

<script>
    System.import('src/main');
</script>

生产工作流程

在生产中,我正在使用jspm bundle --inject注入bundles选项System.config.这有效地只加载了必要的文件:

system.js
config.js
main.bundle.js

当我尝试System.import()在生产期间异步加载模块时,它会正常加载,这意味着在生产过程中浏览器中会发生转换.

问题

1. 我可以很容易地将我的每个模块构建到AMD中,但是我怎样才能使用异步和单独获取它们System.import()？

2. 我还想确保尽可能少地包含浏览器开销,这意味着不包括任何执行转换的脚本.有没有一种方法可以包含system.js没有透明功能的方法？

我有一个中小尺寸(约28 KB,包括(TypeScript编译)JS + HTML模板)Angular 2应用程序.

它最初基于angular.io快速入门,但现在我使用JSPM进行捆绑/缩小以进行部署.

我得到的捆绑JS文件是2.1 MB,当使用gzip压缩时,它下降到449 KB.

这仍然相当大,我想问一下如何最好地减少用于部署的应用程序的总体大小,以最小和最有效的捆绑方式交付我的应用程序.

编辑:我应该提一下,我通过单独导入RxJS运算符,将未压缩但缩小的捆绑包大小减少到1.9 MB,例如import 'rxjs/add/operator/map';:所以,除了那之外我还会寻找任何规模的节省.

非常感谢您的帮助.

在Aurelia的预发布版本(例如,beta版)中,JSPM安装总是得到.js和.d.ts文件,这是完美的.现在JSPM只下载.js文件.要修复(？)这个,现在使用Typings的Skeleton模板,在typings.json配置文件中有很多额外的行.现在,随着TypeScript 2.0的发布,Typings被认为已弃用,获取类型定义的"官方"方式是npm的@types存储库.Aurelia不存在(这很好),但为什么我不能像以前一样使用JSPM下载类型？我不想为Aurelia使用Typings,因为,首先,我不想在不同的包管理器中一次又一次地指定相同的包只是为了在已经凌乱的现代JS工具设置中添加更多的混乱,其次,作为我之前说过,打字会被弃用,我很高兴它发生了.