Question

＆＃39;测试模块＆＃39;是使用index.d.ts定义文件在Typescript中编写的外部模块。它在package.json中具有tsd / tsc的属性：

＆＃34; typings＆＃34;：＆＃34; dist / index.d.ts＆＃34;，＆＃34;打字稿＆＃34;：{ ＆＃34;定义＆＃34;：＆＃34; dist / index.d.ts＆＃34; }
＆＃39;测试模块＆＃39;在jspm_packages / npm / test-module中安装JSPM，以便使用SystemJS进行动态加载
＆＃39;应用＆＃39;是Typescript应用程序，导入＆＃39;测试模块＆＃39;像这样：

从＆＃39; test-module＆＃39;;

问题是＆＃39;测试模块＆＃39;模块必须在两个位置：

node_modules

（否则它找不到＆＃39; test-module＆＃39;并且在从＃test;模块＆＃39编译导入时出错;）
在 jspm_packages 中，以便SystemJS在运行时加载

所以，我需要将它插入package.json＆＃39; dependencies＆＃39; AND＆＃39; jspm / dependencies＆＃39;

是否存在黑客攻击：

A）强制JSPM / SystemJS仅使用标准的 node_modules 文件夹？（我知道我可以使用原始的SystemJS并映射node_modules，但这意味着我必须为依赖的每个依赖关系和依赖关系映射它，这是很多手工工作）

或

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'。 typescript（文件 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。

这种方法存在两个问题：

包裹是手动（这很烦人）
myLib 是手写的定义，不能更改为其他位置，我们必须使用import'myLib / bla'，实际上'myLib'可以被SystemJS和jspm覆盖到其他参考

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

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

编辑：

我创建了一个gulp任务来编辑typescript定义文件并添加自动添加声明模块。方法如下：

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
};

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

1 个答案: