从浏览器中排除库 - 无法引用 react.js / 未捕获错误：找不到模块'react'

Question

我一直试图得到一个gulpfile设置使用Browserify生成一个编译文件，不包括第三方元素。我对react.js有一个明显的问题。

如果我排除它(当我的gulpfile下面指示'build-js-prod'运行时)，然后我得到一个恼人的警告说我应该使用React的生产版本。如果我单独添加react URL就会得到错误提示。

未捕获错误:Cannot find module 'react'

这是我的gulpfile(编辑)

'use strict';
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    clean = require('gulp-clean'),
    uglify = require('gulp-uglify'),
    sourcemaps = require("gulp-sourcemaps"),
    concat = require("gulp-concat-js"),
    rename = require("gulp-rename"),
    browserify = require('browserify'),
    watchify = require('watchify'),
    reactify = require('reactify'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),
    jslint = require('gulp-eslint'),
    gutil = require('gulp-util');
const PATHS = {
    scriptsSrcPath: 'Scripts/',
    sassSrcPath: 'Sass/',
    buildPath: 'wwwroot/',
    scriptsBuildPath: 'wwwroot/js/',
    sassBuildPath: 'wwwroot/css/',
    fontsBuildPath: 'wwwroot/fonts/',
    namespace: '<%= pkg.name %>'
};
const LIBS = ['jquery', 'react', 'react-dom', 'bootstrap'];
// JS tasks
var bundle = function(bundler) {
    return bundler.bundle()
        .pipe(source('modle-portal.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(uglify())
            .on('error', gutil.log)
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(PATHS.scriptsBuildPath));
}
gulp.task('js-clean', function () {
    return gulp.src(PATHS.scriptsBuildPath, { read: false })
      .pipe(clean({ force: true }));
});
gulp.task("js-lint", function () {
    return gulp.src([PATHS.scriptsSrcPath + '*.{js,jsx}', PATHS.scriptsSrcPath + '**/*.{js,jsx}'])
        .pipe(jslint())
        .pipe(jslint.format())
        .pipe(jslint.failAfterError());
});
gulp.task("js-build-vendors", ['js-clean'], function () {
    var bundler = browserify({
        entries: [PATHS.scriptsSrcPath + 'app.js'],
        transform: [reactify],
        debug: true,
        cache: {}, packageCache: {}, fullPaths: true
    });
    gulp.src('node_modules/jquery/dist/*')
      .pipe(gulp.dest(PATHS.scriptsBuildPath));
    var bundler = browserify({
        debug: false
    });
    LIBS.forEach(function (lib) {
        bundler.require(lib);
    });
    return bundler.bundle()
        .pipe(source('vendors.js'))
        .pipe(buffer())
        .pipe(uglify())
            .on('error', gutil.log)
        .pipe(gulp.dest(PATHS.scriptsBuildPath));
});
gulp.task("js-build-prod", ['js-lint', 'js-build-vendors'], function () {
    var bundler = browserify({
        entries: [PATHS.scriptsSrcPath + 'app.js'],
        transform: [reactify],
        debug: false,
        cache: {}, packageCache: {}, fullPaths: true
    });
    LIBS.forEach(function (lib) {
        bundler.external(require.resolve(lib, { expose: lib }));
    });
    return bundle(bundler);
});

我有我的HTML设置如下(这产生了唠叨的错误关于使用生产的React)…

    <script src="~/js/jquery.js"></script>
    <script src="~/js/vendors.js"></script>
    <script src="~/js/modle-portal.js" asp-append-version="true"></script>

或者像这样(这会产生'Cannot find'错误)…

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
 <script src="https://unpkg.com/react@15.3.2/dist/react.min.js"></script>
 <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.min.js"></script>
  <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js">

我不知道现在该如何处理这件事。

Answer 1

我最后在我的gulpfile中修复了这个问题。

要求("babel-core/注册");

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    clean = require('gulp-clean'),
    uglify = require('gulp-uglify'),
    sourcemaps = require("gulp-sourcemaps"),
    browserify = require('browserify'),
    shim = require('browserify-shim'),
    watchify = require('watchify'),
    reactify = require('reactify'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),
    jslint = require('gulp-eslint'),
    gutil = require('gulp-util'),
    mocha = require('gulp-mocha'),
    babel = require('gulp-babel');
const EXT_LIBS = ['jquery', 'bootstrap', 'react', 'react-dom'];
const IG_LIBS = [];
const VDR_COMPILED_LIBS = [];

// JS tasks
var buildJs = function (debugMode, watch, bundleCallback) {
    var entryPoint = PATHS.scriptsSrcPath + 'app.js';
    var bundler = browserify({
        entries: [entryPoint],
        transform: [reactify, shim],
        debug: debugMode,
        cache: {}, packageCache: {}, fullPaths: true
    });
        EXT_LIBS.forEach(function (lib) {
            bundler.external(require.resolve(lib, { expose: lib }));
        });
        IG_LIBS.forEach(function (lib) {
            bundler.ignore(require.resolve(lib, { expose: lib }));
        });
    if (watch) {
        bundler = watchify(bundler);
        bundler.on('update', function () {
            bundleCallback(bundler);
        });
        bundler.on('log', function (msg) {
            gutil.log(msg);
        });
    }
    return bundleCallback(bundler);
}

第一个关键元素是为不需要的文件启用'external'而不是'ignore'，但保留

require('react');

行。第二个关键元素是将browserify-shim转换传递给browserify的选项。