錯誤 TS2307：找不到模塊“@microsoft/sp-webpart-base”

Question

我有一個具有以下文件夾結構的共享點框架項目：

1. 它有一個名為 dataaccess 的庫和一個 webpart 工廠方法

Sharepointdataprovider.ts 文件

import {
  SPHttpClient,
  SPHttpClientBatch,
  SPHttpClientResponse
} from '@microsoft/sp-http';
import { IWebPartContext } from '@microsoft/sp-webpart-base';

import List from '../models/List';

  import IDataProvider from './IDataProvider';

  export default class SharePointDataProvider implements IDataProvider {

    private _selectedList: List;
    private _lists: List[];
    private _listsUrl: string;
    private _listItemsUrl: string;
    private _webPartContext: IWebPartContext;

    public set selectedList(value: List) {
      this._selectedList = value;
      this._listItemsUrl = `${this._listsUrl}(guid'${value.Id}')/items`;
    }

    public get selectedList(): List {
      return this._selectedList;
    }

    public set webPartContext(value: IWebPartContext) {
      this._webPartContext = value;
      this._listsUrl = `${this._webPartContext.pageContext.web.absoluteUrl}/_api/web/lists`;
    }

    public get webPartContext(): IWebPartContext {
      return this._webPartContext;
    }

    public getLists(): Promise<List[]> {
      const listTemplateId: string = '171';
      const queryString: string = `?$filter=BaseTemplate eq ${listTemplateId}`;
      const queryUrl: string = this._listsUrl + queryString;

      return this._webPartContext.spHttpClient.get(queryUrl, SPHttpClient.configurations.v1)
        .then((response: SPHttpClientResponse) => {
          return response.json();
        })
        .then((json: { value: List[] }) => {
          return this._lists = json.value;
        });
    }
  }

在我的 gulpfile.js 我有這個：

'use strict';

const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');

//Required libraries to update typings
var through = require('through2'),
util = require('gulp-util'),
spawn = require('child_process').spawn,
clean = require('gulp-clean'),
ts = require('gulp-typescript');

//ootb
build.initialize(gulp);

// required variables to make configuration easier on the gulp tasks below
var libsPath = 'lib/libraries';
var srcPath = 'src/libraries';
var spdataaccessLibraryFolder = 'spdataaccess';

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

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

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

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

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

  var updateLibTypings = function (typingsFilePath, opt) {
    var typings = ["declare module 'spdataaccess' {"];
    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);
  }

但是，當我嘗試運行時：

吞咽更新-spdataaccess-typings

我收到這些錯誤：

錯誤 TS2307：找不到模塊“@microsoft/sp-webpart-base”。

   If I check tsconfig.json, it seems to be fine



{
  "compilerOptions": {
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "module": "commonjs",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "types": [
      "es6-promise",
      "es6-collections",
      "webpack-env"
    ]
  }
}

Answer 1

我今天在設置 SharePoint 框架時遇到了同樣的錯誤。

您需要使用以下命令：

npm install @microsoft/sp-webpart-base