TS2307：找不到模塊“計算器”

Question

我在 Visual Studio Code 中運行一個簡單的 Sharepoint 框架項目：

我有這個結構：

我的文件如下： 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;
  }
}

計算器.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 上正確生成了typings 文件

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'; 是錯的。 您需要使用相對路徑在項目中導入模塊。 例如

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

更多的

• 小心文件大小寫。 為了一致性，我更喜歡camelCase 。
• 主節點模塊： https ://nodejs.org/docs/latest/api/modules.html