更多

Question

我在Visual Studio代码中运行一个简单的Sharepoint Framework项目：

我有这个结构：

我的文件如下： ComplexCalculator.ts

export class ComplexCalculator {
  public sqr(v1: number): number {
    return v1*v1;
  }

  public multiply(v1:number, v2:number): number {
    return v1*v2;
  }
}

EasyCalculator.ts

export class EasyCalculator {
  public sum(v1: number, v2: number): number {
    return v1 + v2;
  }

  public subtraction(v1: number, v2: number): number {
    return v1 - v2;
  }
}

Calculator.ts

export * from './ComplexCalculator';
export * from './EasyCalculator';

Calculator.manifest.json

{
  "$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
  "id": "8de800b0-6a4f-4cb0-bf75-62c32e6ea66b",
  "componentType": "Library",
  "version": "0.0.1",
  "manifestVersion": 2
}

在我的config.json上我有这个：

{
  "entries": [
    {
      "entry": "./lib/webparts/librarysample/LibrarysampleWebPart.js",
      "manifest": "./src/webparts/librarysample/LibrarysampleWebPart.manifest.json",
      "outputPath": "./dist/librarysample.bundle.js"
    },
     {
      "entry": "./lib/libraries/calculator/Calculator.js",
      "manifest": "./src/libraries/calculator/Calculator.manifest.json",
      "outputPath": "./dist/calculator.bundle.js"
    }
  ],
  "externals": {
    "@microsoft/sp-client-base": "node_modules/@microsoft/sp-client-base/dist/sp-client-base.js",
    "@microsoft/sp-client-preview": "node_modules/@microsoft/sp-client-preview/dist/sp-client-preview.js",
    "@microsoft/sp-lodash-subset": "node_modules/@microsoft/sp-lodash-subset/dist/sp-lodash-subset.js",
    "office-ui-fabric-react": "node_modules/office-ui-fabric-react/dist/office-ui-fabric-react.js",
    "react": "node_modules/react/dist/react.min.js",
    "react-dom": "node_modules/react-dom/dist/react-dom.min.js",
    "react-dom/server": "node_modules/react-dom/dist/react-dom-server.min.js",
    "calculator": "./dist/calculator.bundle.js"
  },
  "localizedResources": {
    "librarysampleStrings": "webparts/librarysample/loc/{locale}.js"
  }
}

最后是我的gulpfile.js

const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
var through = require('through2'),
    util = require('gulp-util'),
    spawn = require('child_process').spawn,
    clean = require('gulp-clean'),
    ts = require('gulp-typescript');

build.initialize(gulp);

var libsPath = 'lib/libraries';
var srcPath = 'src/libraries';
var calculatorLibraryFolder = 'calculator';

gulp.task('watch-calculator-lib', (cb) => {
  var watcher = gulp.watch(`${srcPath}/${calculatorLibraryFolder}/**/*.ts`, ['update-calculator-typings']);
  watcher.on('change', (event) => {
    console.log(`File ${event.path} was ${event.type}, Rebuilding library typings...`);
  });
});

gulp.task('update-calculator-typings', [
  'update-calculator-typings:clean-old-typings',
  'update-calculator-typings:get-latest-typings',
  'update-calculator-typings:build-lib-typings'
], () => {
});

gulp.task('update-calculator-typings:clean-old-typings', () => {
  return gulp.src(`${libsPath}/${calculatorLibraryFolder}/**`, { read: false })
    .pipe(clean());
});

gulp.task('update-calculator-typings:get-latest-typings', ['update-calculator-typings:clean-old-typings'], () => {
  var tsResult = gulp.src(`${srcPath}/${calculatorLibraryFolder}/**/*.ts`)
    .pipe(ts({
      outDir: `${libsPath}/${calculatorLibraryFolder}`,
      module: 'umd',
      declaration: true
    }));
  return tsResult.dts.pipe(gulp.dest(`${libsPath}/${calculatorLibraryFolder}`));
});

gulp.task('update-calculator-typings:build-lib-typings', ['update-calculator-typings:get-latest-typings'], () => {
  return gulp.src(`${libsPath}/${calculatorLibraryFolder}/**/*.d.ts`)
    .pipe(updateLibTypings('calculator.d.ts'))
    .pipe(gulp.dest('./typings'));
});

var updateLibTypings = function (typingsFilePath, opt) {
  var typings = ["declare module 'calculator' {"];
  var latestFile;

  function processTypings(file, encoding, cb) {
    if (file.isNull() || file.isStream()) {
      cb();
      return;
    }

    latestFile = file;

    var contents = file.contents.toString('utf8');
    if (contents.indexOf('export declare class ') === -1) {
      cb();
      return;
    }

    contents = contents.replace('export declare class ', 'class ');
    typings.push(contents);
    cb();
  }

  function endStream(cb) {
    if (!latestFile) {
      cb();
      return;
    }

    typings.push('}');

    var file = latestFile.clone({ contents: false });
    file.path = latestFile.base + typingsFilePath;
    file.contents = new Buffer(typings.join('\r\n'));
    this.push(file)
    cb();
  }

  return through.obj(processTypings, endStream);
}

在dist文件夹上正确生成了打字文件 calculator.d.ts

declare module 'calculator' {
class ComplexCalculator {
    sqr(v1: number): number;
    multiply(v1: number, v2: number): number;
}

class EasyCalculator {
    sum(v1: number, v2: number): number;
    subtraction(v1: number, v2: number): number;
}

}

但是，当我尝试将其引用到我的webpart文件

时

import * as calculator from 'calculator';

然后我尝试编译

我收到此错误

Error - typescript - src/webparts/librarysample/LibrarysampleWebPart.ts(13,29): error TS2307: Cannot find module 'calculator'.

Answer 1

您的代码import * as calculator from 'calculator';错误。您需要使用 relative paths 在项目中导入模块。例如

import * as calculator from './path/to/Calculator';

TS2307：找不到模块＆＃39;计算器＆＃39;

1 个答案:

更多