我使用gulp进行构建和缩小，并且在React引发控制台错误时遇到问题：
未捕获的错误：React正在生产模式下运行，但是代码无效 消除尚未应用。阅读如何正确配置 反应生产： https://reactjs.org/docs/optimizing-performance.html#use-the-production-build
我已尽力遵循指南，但仍收到此错误。谁能告诉我我在这里想念的东西吗？
我在生产模式下运行以重建文件的命令是：
gulp deploy
这是我的牙龈文件：
const autoprefixer = require('gulp-autoprefixer');
const babelify = require('babelify');
const browserify = require('browserify');
const buffer = require('vinyl-buffer');
const chalk = require('chalk');
const concat = require('gulp-concat');
const del = require('del');
const envify = require('envify');
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const minify = require('gulp-clean-css');
const plugins = require('gulp-load-plugins');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const source = require('vinyl-source-stream');
const uglify = require('gulp-uglify');
const uglifyify = require('uglifyify');
const assetsDir = 'assets/';
const paths = {
src: {
images: `${assetsDir}img/**/**.{gif,jpeg,jpg,png,svg}`,
scripts: `${assetsDir}js/view.js`,
styles: `${assetsDir}css/**.{css,scss}`,
},
watch: {
images: [
`${assetsDir}img/**/**.{gif,jpeg,jpg,png,svg}`,
],
scripts: [
`${assetsDir}js/**/**.{coffee,js,jsx}`,
],
styles: [
`${assetsDir}css/**/**.{css,scss}`,
],
},
dest: {
images: `${assetsDir}dist/img`,
scripts: `${assetsDir}dist/js`,
styles: `${assetsDir}dist/css`,
},
};
// External dependencies you do not want to rebundle while developing,
// but include in your application deployment
const dependencies = [
'classnames',
'prop-types',
'react',
'react-bootstrap',
'react-dom',
'react-placeholder',
'react-redux',
];
// keep a count of the times a task refires, used during watch
let scriptsCount = 0;
// Private Functions
// ----------------------------------------------------------------------------
function logError(...args) {
plugins().notify.onError({
title: 'Compile Error',
message: '<%= error.message %>',
}).apply(this, args);
this.emit('end');
}
function bundleApp(isProduction) {
// Browserify will bundle all our js files together in to one and will let
// us use modules in the front end.
const appBundler = browserify({
entries: paths.src.scripts,
debug: !isProduction,
cache: {}, packageCache: {},
extensions: ['.js', '.jsx'],
transform: [
[
babelify, {
ignore: /(bower_components)|(node_modules)/,
presets: ['env', 'react'],
}],
],
});
// make the dependencies external so they dont get bundled by the
// app bundler. Dependencies are already bundled in vendor.js for
// development environments.
if (dependencies.length > 0) {
if (!isProduction) {
appBundler.external(dependencies);
}
}
appBundler
// transform ES6 and JSX to ES5 with babelify
.bundle()
.on('error', logError)
.pipe(source('bundle.js'))
.pipe(gulp.dest(paths.dest.scripts))
.pipe(buffer())
.pipe(rename('bundle.min.js'))
.pipe(plugins().sourcemaps.init({ loadMaps: true }))
.pipe(uglify().on('error', (e) => {
console.log(e);
}))
.pipe(plugins().sourcemaps.write('.'))
.pipe(gulp.dest(paths.dest.scripts))
.on('end', () => { console.log(chalk.white.bgGreen.bold('bundleApp: Complete')); });
}
function bundleImages() {
return gulp.src(paths.src.images)
.pipe(imagemin())
.pipe(gulp.dest(paths.dest.images));
}
exports.bundleImages = bundleImages;
function bundleStyles() {
return gulp.src(paths.src.styles)
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 4 versions'],
cascade: false,
}))
.pipe(gulp.dest(paths.dest.styles))
.pipe(concat('app.css'))
.pipe(gulp.dest(paths.dest.styles))
.pipe(minify({ keepBreaks: true }))
.pipe(rename({
suffix: '.min',
}))
.pipe(gulp.dest(paths.dest.styles))
.on('end', () => { console.log(chalk.white.bgGreen.bold('bundleStyles: Complete')); });
}
function bundleVendor(isProduction) {
scriptsCount += 1;
setEnvSettings(isProduction);
// If it's not for production, a separate vendors.js file will be created
// the first time gulp is run so that we don't have to re-bundle things like
// react every time there's a change in the js file
if (dependencies.length > 0) {
if (scriptsCount === 1) {
// create vendors.js for dev environment.
browserify({
require: dependencies,
debug: !isProduction,
transform: [
[
envify, {
global: true, // also apply to node_modules
NODE_ENV: isProduction ? 'production' : 'development',
}],
[uglifyify],
],
})
.bundle()
.on('error', logError)
.pipe(source('vendors.js'))
.pipe(gulp.dest(paths.dest.scripts))
.pipe(buffer())
.pipe(rename('vendors.min.js'))
.pipe(uglify({compress: { unused: true, dead_code: true }}).on('error', (e) => {
console.log(e);
}))
.pipe(gulp.dest(paths.dest.scripts))
.on('end', () => { console.log(chalk.white.bgCyan.bold('bundleApp->Vendors: Complete')); });
}
}
}
function setEnvSettings(isProduction) {
// Make sure the ENV is set correctly
process.env.NODE_ENV = process.env.NODE_ENV = isProduction ? 'production' : 'development';
console.log(chalk.white.bgCyan.bold(`NODE_ENV: ${process.env.NODE_ENV}`));
}
// Gulp tasks
// ----------------------------------------------------------------------------
gulp.task('clean', () => { del([`${assetsDir}dist`]); });
gulp.task('images', () => {
bundleImages();
});
gulp.task('scripts', () => {
bundleApp(false);
bundleVendor(false);
});
gulp.task('styles', () => {
bundleStyles();
});
gulp.task('deploy', () => {
bundleApp(true);
bundleVendor(true);
});
gulp.task('watch', () => {
gulp.watch(paths.watch.images, ['images']);
gulp.watch(paths.watch.scripts, ['scripts']);
gulp.watch(paths.watch.styles, ['styles']);
});
gulp.task('default', ['watch', 'images', 'scripts', 'styles']);
这是我的包裹文件：
{
"name": "MyApp",
"version": "1.18.04.09",
"description": "",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-airbnb": "^2.5.3",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babelify": "^8.0.0",
"bootstrap-toggle": "^2.2.2",
"browserify": "^16.2.2",
"classnames": "^2.2.6",
"coffeescript": "^2.3.1",
"deep-extend": "^0.6.0",
"del": "^3.0.0",
"envify": "^4.1.0",
"eslint": "^5.3.0",
"eslint-config-airbnb": "^17.0.0",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-react": "^7.10.0",
"event-stream": "^3.3.4",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^5.0.0",
"gulp-babel": "^7.0.1",
"gulp-clean-css": "^3.9.4",
"gulp-coffee": "^3.0.2",
"gulp-concat": "^2.6.1",
"gulp-env": "^0.4.0",
"gulp-eslint": "^5.0.0",
"gulp-imagemin": "^4.1.0",
"gulp-load-plugins": "^1.5.0",
"gulp-notify": "^3.2.0",
"gulp-plumber": "^1.2.0",
"gulp-react": "^3.1.0",
"gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-uglify": "^3.0.1",
"prop-types": "^15.6.2",
"pump": "^3.0.0",
"react": "^16.4.2",
"react-block-ui": "^1.1.2",
"react-bootstrap": "^0.32.1",
"react-bootstrap-toggle": "^2.3.1",
"react-dom": "^16.4.2",
"react-highcharts": "^16.0.2",
"react-placeholder": "^3.0.1",
"react-redux": "^5.0.7",
"react-sortablejs": "^1.3.6",
"react-table": "^6.8.6",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"source-map": "^0.7.3",
"superagent": "^3.8.3",
"uglify-es": "^3.3.9",
"uglifyify": "^5.0.1",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
},
"dependencies": {
"chalk": "^2.4.1",
"crypto-js": "^3.1.9-1",
"lscache": "^1.2.0",
"sortablejs": "^1.7.0"
}
}