标签: systemjs

我正在努力使SystemJS与Typescript一起工作,但它们似乎相互冲突.

如何在没有与Typescript上的关键字冲突的情况下利用System.js中的自动加载？使用import/require使得Typescript使用它自己的方式来加载和引用文件,虽然它翻译export为module.exports = ...,但它不会做同样的事情import

是否有可能实现这一点,或者我将不得不等待Typescript支持ES6关键字？

我想从requirejs迁移到SystemJS但是我没有找到解决方案,因为requirejs有模块版本控制.例如在生产(ASP.Net网站)中我设置了RequireJS,如下所示:

require.config({
            baseUrl: "@Url.Content("~/Scripts/")",
            urlArgs: "buildNumber=@(File.GetLastWriteTime(ViewContext.Controller.GetType().Assembly.Location).ToBinary().ToString() + typeof(Foundation.MvcApplication).Assembly.GetName().Version)",
            ...
});

它保证在生产环境中重新发布项目后重新加载文件,并保持这种方式直到重新加载.

但是,我没有为SystemJS找到任何解决方案(因为SystemJS管理更多类型的模块,我想迁移到它).

有没有人在生产中使用SystemJS并遇到同样的问题,你知道SystemJS中的"urlArgs"参数(或插件)吗？

我对SystemJS有点困惑,它似乎自动单独加载文件,不编译并将这些最小化为一个大的js文件.

我认为最初的想法是要求不同的文件,虽然较小的是不好的做法？和一个首选的大型js文件(最小化)并生成.

这就是我现在安装SystemJS来加载单独文件的方法(见下文),现在这是推荐的方法吗？

   System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/main')
                .then(null, console.error.bind(console));

我一直在我的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没有透明功能的方法？

我正在研究一个简单的nodejs 电子(以前称为原子壳)项目.我正在使用angular 2编写它,使用项目设置与他们在打字稿文档中建议的相同项目设置:

TSC:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
  "node_modules",
  "typings/main",
  "typings/main.d.ts"
  ]
}

我需要运行一个命令,我发现我可以使用节点"child_process"来完成它.无论如何我无法找到"import"或"require"它,同时从node.d.ts文件中使用它的类型.我在node.d.ts文件中找到了符合我需要的"child_process"接口,这就是它在node.d.ts文件中查看的方式:

    declare module "child_process" {
    import * as events from "events";
    import * as stream from "stream";

    export interface ChildProcess extends events.EventEmitter {
        stdin:  stream.Writable;
        stdout: stream.Readable;
        stderr: stream.Readable;
        pid: number;
        kill(signal?: string): void;
        send(message: any, sendHandle?: any): void;
        disconnect(): void;
        unref(): void;
    }

    export function spawn(command: string, …

Mac OSX El capitan | angular-cli:0.1.0 | 节点:5.4.0 | os:darwin x64

我尝试根据angular-cli wiki安装第三方npm模块:https://github.com/angular/angular-cli/wiki/3rd-party-libs但是失败了.我几天来一直在努力奋斗,非常感谢任何帮助.

获取错误的步骤:

ng new lodashtest3 cd lodashtest3 npm install lodash --save typings install lodash --ambient --save

角-CLI-build.json:

module.exports = function(defaults) { return new Angular2App(defaults, { vendorNpmFiles: [ ... 'lodash/**/*.js' ] }); }; ng build (lodash在dist/vendor中正确添加)

系统config.ts:

/** Map relative paths to URLs. */
 const map: any = {
   'lodash': 'vendor/lodash/lodash.js'
 };

 /** User packages configuration. */
 const packages: any = {
   'lodash': {
     format: …

我想要包含一个调用/assets/js/clusterfeaturelayer.js我的项目的文件,其中我使用SystemJS和WebPack,它具有以下结构.

• / app < - 角度应用代码
• / node_modules < - npm包
• / assets/js < - 其他不在NPM中的第三方库

该文件以AMD样式定义,如下所示:

define([
  'dojo/_base/declare',
  'dojo/_base/array',
  'dojo/_base/lang',  
  'esri/SpatialReference',
  'esri/geometry/Point',
  'esri/geometry/Polygon',
  'esri/geometry/Multipoint',
  'esri/geometry/Extent',
  'esri/graphic',

], function (declare, arrayUtils, lang, SpatialReference, Point, Polygon, Multipoint, Extent, Graphic) 
{

});

我想在我的代码中使用该组件 import ClusterFeatureLayer = require("ClusterFeatureLayer");

但无论我如何尝试将此文件包含在我的systemjs和webpack配置中,它都找不到它:

这是我的systemjs配置:

(function(global) {

  // map tells the System loader where to look for things.
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs',
    'ClusterFeatureLayer':        'assets/js'
  };

  // …

我想从HTML调用TypeScript(ultimetely JavaScript)函数.问题是我还想使用模块系统(systemjs,commonjs等)和webpack.

这是一个例子:

example.ts:

export class Example {
    myFunction() {
        alert('Test');
    }
}

example2.ts:

export function doSomething() {
    alert('Test2');
}

example.html的:

<html>
    <head>
        <script src="path/to/the/compiled/js/file.js"></script>
        <script>
            $(document).ready(function() {
                $('#test-btn').click(function(){
                    var example = new Example(); //error1
                    example.myFunction();
                });
            });
        </script>
    </head>
    <body>
        <button id="test-btn">Click me</button>
        <a href="javascript:doSomething()">Click me too</a> <!-- error2 -->
    </body>
</html>

错误注释指示错误发生的位置:找不到导出的类/函数,因为使用了模块系统.如果我查看已编译的js文件,我可以看到类和函数声明放在某些模块函数中,因此无法从HTML访问它们.

目前我通过将整个$(document).ready...部分移动到TypeScript文件中来使用解决方法.但是对于这个<a href...例子我没有任何解决方法.

所以我的最后一个问题是:实际上是否可以从HTML调用TypeScript函数/类并使用模块系统？

我们这是写在SystemJS版本的旧代码0.21.3。我们正在尝试使用最新版本的SystemJS从内存中的JavaScript变量动态加载模块。

谁能指出我的最新替代方案registerDynamic，然后import再说相同。

基本上，我们需要在最新版本的SystemJS中编写此代码。如果可以使用任何其他框架完成此操作，那也很好。

import * as _dal from 'data-access-layer';
import * as _ngbForms from '@ng-bootstrap/ng-bootstrap';
import * as _ngCommon from '@angular/common';
import * as _ngCore from '@angular/core';
import * as _ngForms from '@angular/forms';
import * as _ngHttpClient from '@angular/common/http';

@Component({
  selector: 'app-custom-mod',
  templateUrl: './custom-mod.component.html',
  styleUrls: ['./custom-mod.component.css']
})
export class CustomModComponent implements OnInit {

  ngOnInit() {
    this.LoadComponent()
  }

  LoadComponent() {
    SystemJS.set('@angular/core', SystemJS.newModule(_ngCore));
    SystemJS.set('@angular/common', SystemJS.newModule(_ngCommon));
    SystemJS.set('@angular/forms', SystemJS.newModule(_ngForms));
    SystemJS.set('@angular/common/http', SystemJS.newModule(_ngHttpClient));
    SystemJS.set('@ng-bootstrap/ng-bootstrap', SystemJS.newModule(_ngbForms))

    const normalized = SystemJS.normalizeSync("@customModule-" + …