如何使用JSPM导入带有Typescript声明的外部NPM模块

Question

1. 'test-module'是外部模块，用Typescript与index.d.ts定义文件编写。它具有的package.json用于TSD/TSC属性：

   “分型”： “DIST/index.d.ts”， “打字原稿”：{ “定义”： “DIST/index.d.ts” }

2. “测试模块”安装有JSPM在jspm_packages/NPM /测试模块，用于动态加载使用SystemJS

3. “应用”是打字稿应用程序，它的进口“测试模块”是这样的：

   import'Component'from'test-module';

的问题是，“测试模块”模块已经在这两个位置是：

1. 在node_modules为打字稿编译器（否则它没有找到“测试模块”和从“测试模块”）

2. 在jspm_packages编译为进口期间SystemJS错误它运行时

期间加载它

所以，我需要将其插入的package.json '依赖' 与 '热蒙/依赖'

是否有黑客于：

A）力JSPM/SystemJS只使用标准node_modules文件夹？ （我知道我可以使用原始SystemJS和地图node_modules但它意味着我必须映射它为每一个依赖和依赖的依赖是大量的手工操作的）

OR

B）力使用某种路径映射来搜索模块的Typescript（我猜测版本1.8将具有此功能）

任何想法？

Answer 1

这是我不喜欢的答案，但是是一种解决方法。事实上，当我搜索我的案例的答案时，我遇到了你的问题，他们是相似的。

在我的情况下，我也创建了一个外部库，该库使用typescript编译，生成的模块将在外部jspm项目中使用。

对我的作品是用JavaScript es6相同的语法导入库。假设库命名为myLib，并且具有myLib = blabla的config.js映射，并且您有一个名为notify.js（由typescript生成）的文件。进口是

import Notify from 'myLib/notify' 

在运行时它可以工作，但问题是该项目的编译器找不到'myLib/notify'。打字稿生成的定义（文件jspm_package/github/myLib/myLib@version/notify.d。TS该库是一样的东西：

export declare enum NotifyStatus { 
    INFO = 0, 
    SUCCESS = 1, 
    WARNING = 2, 
    DANGER = 3, 
} 
export declare enum NotifyPosition { 
    TOP_CENTER = 0, 
    TOP_LEFT = 1, 
    TOP_RIGHT = 2, 
    BOTTOM_CENTER = 3, 
    BOTTOM_LEFT = 4, 
    BOTTOM_RIGHT = 5, 
} 
/** 
* Class for notifications 
*/ 
export declare class Notify { 
    /** 
    * Show a default Notification in the page 
    * @param {string}   message  The message 
    * @param {NotifyStatus =   NotifyStatus.INFO} status Status to style the message 
    * @param {[type]}   timeout=5000 Timeout 
    * @param {NotifyPosition =        NotifyPosition.TOP_CENTER} pos  Position to display the message 
    * @return {NotifyMessage}     A object representing the message on the DOM 
    */ 
    static show(message: string, status?: NotifyStatus, timeout?: number, pos?: NotifyPosition): NotifyMessage; 
    private static getStatusString(status); 
    private static getPositionString(position); 
} 
export interface DialogModal { 
    show(): any; 
    hide(): any; 
} 

要解决我手动修改定义包装在一个库中的声明：

declare module 'myLib/notify' { 
export declare enum NotifyStatus { 
    INFO = 0, 
    SUCCESS = 1, 
    WARNING = 2, 
    DANGER = 3, 
} 
export declare enum NotifyPosition { 
    TOP_CENTER = 0, 
    TOP_LEFT = 1, 
    TOP_RIGHT = 2, 
    BOTTOM_CENTER = 3, 
    BOTTOM_LEFT = 4, 
    BOTTOM_RIGHT = 5, 
} 
/** 
* Class for notifications 
*/ 
export declare class Notify { 
    /** 
    * Show a default Notification in the page 
    * @param {string}   message  The message 
    * @param {NotifyStatus =   NotifyStatus.INFO} status Status to style the message 
    * @param {[type]}   timeout=5000 Timeout 
    * @param {NotifyPosition =        NotifyPosition.TOP_CENTER} pos  Position to display the message 
    * @return {NotifyMessage}     A object representing the message on the DOM 
    */ 
    static show(message: string, status?: NotifyStatus, timeout?: number, pos?: NotifyPosition): NotifyMessage; 
    private static getStatusString(status); 
    private static getPositionString(position); 
} 
export interface DialogModal { 
    show(): any; 
    hide(): any; 
} 
} 

我tsconfig.json文件被配置为看在定义jspm_packages

然后编译停止警告和Atom编辑器提供intellisense。

有两个问题与该方法：

1. 所述包装纸是由 手动 （这是烦人）
2. MYLIB是在定义手写，并且不能被改变为其它位置，我们必须使用import'myLib/bla'，实际上，'myLib'可以被SystemJS和jspm覆盖以供其他参考。

我在搜索的是一种用模块声明自动生成打字稿定义的方法。

我遇到了这个https://www.npmjs.com/package/autodts，但我不完全了解它是如何工作的，但它可以用于以这种方式自动生成定义文件的接缝。

编辑：

我创建了一个大口的任务编辑打字稿定义文件，并添加自动添加申报模块。这里是如何：

var gulp = require('gulp'); 
var runSequence = require('run-sequence'); 
var ts = require('gulp-typescript'); 
var paths = require('../paths'); 
var through2 = require('through2'); 
var concat = require('gulp-concat'); 
var insert = require('gulp-insert'); 
var rename = require('gulp-rename'); 
var merge = require('merge2'); 
var modify = require('gulp-modify'); 

var tsProjectAmd = ts.createProject('tsconfig.json', {module: 'amd'}); 
var tsProjectES6 = ts.createProject('tsconfig.json', {module: 'es6'}); 
var tsProjectCOMMONJS = ts.createProject('tsconfig.json', {module: 'commonjs'}); 
var tsProjectSystem = ts.createProject('tsconfig.json', {module: 'system'}); 

var makeBuild = function(project, format, path, output){ 
    return function(){ 
    var tsResult = gulp.src(path) 
     .pipe(ts(project)); 
    return merge([ 
     tsResult.js.pipe(gulp.dest(output + format)), 
     tsResult.dts.pipe(modify({ 
     fileModifier: function(file, content){ 
      // Split at /dist/ caracter 
      var regex = new RegExp("/" + paths.dist); 
      var split = file.path.split(regex); 
      // Remove ".d.ts"; 
      var fileNameAndPath = split[1].slice(0, split[1].length - 5); 
      if(fileNameAndPath != paths.packageName){ 
      return 'declare module "' + paths.packageName + "/" + fileNameAndPath + '" {\n' + content + '\n}'; 
      }else { 
      return content; 
      } 

     } 
     })).pipe(gulp.dest(output + format)) 
    ]); 
    } 
} 


gulp.task('build-amd', makeBuild(tsProjectAmd, '', paths.source, paths.output)); 

paths.js

var path = require('path'); 
var fs = require('fs'); 

var appRoot = 'src/'; 
var outputRoot = 'dist/src/'; 
var pkg = JSON.parse(fs.readFileSync('./package.json', 'utf-8')); 

module.exports = { 
    root: appRoot, 
    source: [appRoot + '**/*.ts','typings/**/*.ts'], 
    html: appRoot + '**/*.html', 
    style: outputRoot + 'css/**/*.css', 
    styles: outputRoot + 'css/', 
    less: ['less/theme/**/*.less','!less/theme/_variables.less'], 
    fonts: 'less/uikit/src/fonts/*', 
    images: 'images/**/*', 
    output: outputRoot, 
    doc:'./docs', 
    apiDoc: './api-doc', 
    dist: 'dist/', 
    testsFixtures: 'test/fixtures/*', 
    specsSrc: 'test/**/*.ts', 
    specsOutput: 'dist/', 
    packageName: pkg.name 
};