从browserify中排除库-无法引用react.js /未捕获的错误：找不到模块“反应”

Question

I have been trying to get a gulpfile set up to use Browserify to generate a compiled file that does not include the 3rd party elements. I have a distinct problem with react.js.

If I exclude it (as my gulpfile below indicates when 'build-js-prod' is run) then I get an annoying warning saying I should use the production version of React. If I add the react URL seperately then I get an error saying...

Uncaught Error: Cannot find module 'react'

Here is my gulpfile (edited)

'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);
});

I have my HTML set up as follows (this generates the nagging error about using production React)...

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

or like this (which generates the 'Cannot find' error)...

<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">

I am at a loss as to how to proceed with this now.

Answer 1

I fixed this in the end within my gulpfile with 2 key changes.

require('babel-core/register');

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);
}

The first key element was enabling 'external' rather than 'ignore' for the unneeded files but keeping the

require('react');

line in the modules. The second key element was passing the browserify-shim transform into the options for browserify.