找不到模块React（已安装）

Question

我配置了我的React环境，然后将我的TypeScript转换为bundle.js。无论我使用什么教程React代码，我都会收到以下错误：

_prelude.js:1 Uncaught Error: Cannot find module 'react'
at s (_prelude.js:1)
at _prelude.js:1
at Object.1.react (app.tsx:1)
at s (_prelude.js:1)
at e (_prelude.js:1)
at _prelude.js:1

当我在堆栈跟踪中单击“app.tsx：1”时，它在哪一行代码处失败，我看到了代码行：

import * as React from "react";

然后我检查了Chrome中的“网络”标签，以确保加载了bundle.js文件，而不是app.tsx，我看到：

然后检查我的“Node_modules”文件夹中是否有React，因为我已经安装了stackoverflow的另一个问题。

我没有tsconfig.json，我相信这是可选的，因为我的gulpfile.js有参数来指定目标等？

的package.json：

{
  "name": "website",
  "version": "0.0.1",
   "private": true,
    "engines": {
     "node": ">=0.10.0"
     },
     "scripts": {
     "build": "gulp bundle",
     "clean": "gulp clean",
     "test": "gulp test"
     },
     "dependencies": {
     "@microsoft/sp-office-ui-fabric-core": "~1.4.0",
     "@types/react": "15.6.6",
     "@types/react-dom": "15.5.6",
     "@types/webpack-env": ">=1.12.1 <1.14.0",
     "babel-core": "^6.26.0",
     "react": "15.6.2",
     "react-dom": "15.6.2"
     },
     "devDependencies": {
     "ajv": "~5.2.2",
     "babelify": "^8.0.0",
     "browserify": "^16.1.0",
     "colors": "^1.1.2",
     "del": "^3.0.0",
     "gulp": "~3.9.1",
     "gulp-concat": "^2.6.1",
     "gulp-sass": "^3.1.0",
     "gulp-serve": "^1.4.0",
     "gulp-sourcemaps": "^2.6.4",
     "gulp-typescript": "^4.0.1",
     "gulp-uglify": "^3.0.0",
     "react": "^15.6.2",
     "tsify": "^3.0.4",
     "tslint": "^5.9.1",
     "typescript": "^2.7.2",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
     "watchify": "^3.10.0"
   }

}

gulpfile.js
'use strict';

const gulp = require('gulp');
const browserify = require('browserify');
const watchify = require('watchify');
const babelify = require('babelify');
const buffer = require('vinyl-buffer');
const source = require('vinyl-source-stream');
const sourcemaps = require('gulp-sourcemaps');
const del = require('del');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const tsify = require('tsify');

const TS_FOLDER = './src/components'
const TS_ENTRYPOINT = "./src/app.tsx"; // TS_FOLDER + '/app.tsx'; 

const EXTERNALS = ['react', 'react-dom'];

const SASS = './src/**/*.scss';

gulp.task('clean', (cb) => {
    del(['dist/**'], cb);
});

gulp.task('vendor', () => {
    return browserify({ debug: true, require: EXTERNALS })
        .bundle()
        .pipe(source('vendor.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(uglify())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dist'));
});

function ts_browserify() {
    return browserify({
            debug: true,
            extensions: ['.tsx', '.ts', '.js'],
        })
        .add(TS_ENTRYPOINT)
        .plugin(tsify, {
            target: 'es5',
            noImplicitAny: true,
            jsx: 'react',
            module: 'commonjs'
        })
        .external(EXTERNALS)
        .transform('babelify', {
            only: TS_FOLDER,
            extensions: ['.tsx', '.ts', '.js']
        });
}

function ts_bundle(bundler) {
    function onerror(err) {
        console.error(err.toString());
        console.error(err.codeFrame);
    }

    return bundler.bundle()
        .on('error', function(err) {
            onerror(err);
            this.emit('end');
        })
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dist/assets/js'));
}

gulp.task('ts', () => {
    return ts_bundle(ts_browserify());
});

gulp.task('ts:watch', () => {
    let bundler = watchify(ts_browserify());
    let rebundle = () => {
        ts_bundle(bundler);
    };

    bundler.on('update', () => {
        console.log(':: Bundling,', new Date());
        rebundle();
    });

    rebundle();
})

gulp.task('sass', () => {
    gulp.src(SASS)
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', sass.logError))
        .pipe(concat('bundle.css'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dist/assets/css'));
});

gulp.task('sass:watch', ['sass'], () => {
    gulp.watch(SASS, ['sass']);
});

gulp.task('watch', ['ts:watch', 'sass:watch']);
gulp.task('default', ['ts']);