Excluding libraries from browserify - Unable to reference react.js / Uncaught Error: Cannot find module 'react'

Question

我一直在尝试设置 gulpfile 以使用 Browserify 生成不包含第 3 方元素的编译文件。 react.js.

我有一个明显的问题

如果我排除它（正如我下面的 gulpfile 指示什么时候 'build-js-prod' 是运行）那么我会收到一个烦人的警告，说我应该使用 React 的生产版本。如果我单独添加反应 URL 然后我得到一个错误说...

未捕获错误：找不到模块 '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 中通过 2 个关键更改修复了这个问题。

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

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

require('react');

模块中的行。第二个关键要素是将 browserify-shim 转换传递到 browserify 的选项中。

Excluding libraries from browserify - Unable to reference react.js / Uncaught Error: Cannot find module 'react'

Excluding libraries from browserify - Unable to reference react.js / Uncaught Error: Cannot find module 'react'

browserify

reactjs

gulp