Question

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

如果我将其排除（因为我的gulpfile指示何时运行'build-js-prod'），那么我会收到一个恼人的警告，说我应该使用React的生产版本。如果我单独添加react URL，那么我会收到错误说...

未捕获错误：找不到模块'反应'

这是我的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>

或者像这样（生成'无法找到'错误）......

<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次更改。

需要（＆＃39;巴别核/注册＆＃39）;

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

第一个关键因素是启用＆＃39;外部＆＃39;而不是忽视＆＃39;对于不需要的文件，但保留

require('react');

在模块中排队。第二个关键元素是将browserify-shim转换传递给browserify的选项。

从browserify中排除库 - 无法引用react.js / Uncaught错误：找不到模块'反应'

1 个答案: