TS2307：找不到模塊 '計算器'

Question

我跑在Visual Studio代碼一個簡單的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; 
    } 
} 

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

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

更多

• 注意有關文件外殼。爲了保持一致，我更喜歡camelCase。
• 主node_modules：https://nodejs.org/docs/latest/api/modules.html