React de producție a construi rezultate cu pagină goală. lucrări de server Dev

voturi
0

Sunt în curs de dezvoltare reacționează app. Scos de a crea-reacționează-app.

npm startMerge bine. Nu există erori de consolă.

npm run buildconstruiește aplicație cu succes. Dar când încerc să deschid index.html există pagină goală. Nu există erori. Fiecare fișier într-o filă de rețea descărcat cu succes.

Nu am nici o idee cum să depana? Am încercat o mulțime de soluții, dar nici unul nu a lucrat.

package.json

{
  name: frontend,
  version: 0.4.0,
  homepage: .,
  debug: true,
  private: true,
  dependencies: {
    autoprefixer: 7.1.6,
    babel-core: 6.26.0,
    babel-eslint: 7.2.3,
    babel-jest: 20.0.3,
    babel-loader: 7.1.2,
    babel-preset-react-app: ^3.1.1,
    babel-runtime: 6.26.0,
    bootstrap: 4.0.0,
    case-sensitive-paths-webpack-plugin: 2.1.1,
    chalk: 1.1.3,
    css-loader: 0.28.7,
    dotenv: 4.0.0,
    dotenv-expand: 4.0.1,
    eslint: 4.10.0,
    eslint-config-react-app: ^2.1.0,
    eslint-loader: 1.9.0,
    eslint-plugin-flowtype: 2.39.1,
    eslint-plugin-import: 2.8.0,
    eslint-plugin-jsx-a11y: 5.1.1,
    eslint-plugin-react: 7.4.0,
    extract-text-webpack-plugin: 3.0.2,
    file-loader: 1.1.5,
    font-awesome: 4.7.0,
    fs-extra: 3.0.1,
    html-webpack-plugin: 2.29.0,
    jest: 20.0.4,
    jquery: 3.3.1,
    jquery.easing: ^1.4.1,
    lodash: 4.17.*,
    magnific-popup: ^1.1.0,
    object-assign: 4.1.1,
    postcss-flexbugs-fixes: 3.2.0,
    postcss-loader: 2.0.8,
    promise: 8.0.1,
    raf: 3.4.0,
    react: ^16.2.0,
    react-dev-utils: ^5.0.0,
    react-dom: ^16.2.0,
    react-redux: 5.0.*,
    react-router-dom: ^4.2.2,
    react-router-hash-link: 1.2.*,
    react-router-redux: 4.0.*,
    react-scrollchor: 4.2.*,
    recharts: 0.22.*,
    redux: 3.7.*,
    redux-thunk: 2.2.*,
    scrollreveal: 3.3.6,
    seamless-immutable: 7.1.*,
    semantic-ui: 2.3.*,
    semantic-ui-css: 2.3.*,
    semantic-ui-react: 0.78.*,
    style-loader: 0.19.0,
    sw-precache-webpack-plugin: 0.11.4,
    url-loader: 0.6.2,
    webpack: 3.8.1,
    webpack-dev-server: 2.9.4,
    webpack-manifest-plugin: 1.3.2,
    whatwg-fetch: 2.0.3,
    react-google-recaptcha: 0.11.*,
    react-async-script: 0.9.*,
    raven-js: 3.25.*,
    babel-preset-es2015: 6.24.*,
    each-async: *,
    indent-string: *,
    validator: *
  },
  devDependencies: {
    browser-sync: 2.23.6,
    gulp: ^3.9.1,
    gulp-clean-css: 3.9.2,
    gulp-header: 2.0.1,
    gulp-rename: ^1.2.2,
    gulp-sass: ^3.1.0,
    gulp-uglify: 3.0.0,
    node-sass: ^4.7.2,
    rebuild-node-sass: *,
    sass-loader: ^6.0.6,
    console-log-shortcut: 1.0.*
  },
  scripts: {
    start: node scripts/start.js,
    build: node scripts/build.js,
    test: node scripts/test.js --env=jsdom
  },
  jest: {
    collectCoverageFrom: [
      **/*.{js,jsx,mjs}
    ],
    setupFiles: [
      <rootDir>/config/polyfills.js
    ],
    testMatch: [
      <rootDir>/**/__tests__/**/*.{js,jsx,mjs},
      <rootDir>/**/?(*.)(spec|test).{js,jsx,mjs}
    ],
    testEnvironment: node,
    testURL: http://localhost,
    transform: {
      ^.+\\.(js|jsx|mjs)$: <rootDir>/node_modules/babel-jest,
      ^.+\\.css$: <rootDir>/config/jest/cssTransform.js,
      ^(?!.*\\.(js|jsx|mjs|css|json)$): <rootDir>/config/jest/fileTransform.js
    },
    transformIgnorePatterns: [
      [/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$
    ],
    moduleNameMapper: {
      ^react-native$: react-native-web
    },
    moduleFileExtensions: [
      web.js,
      mjs,
      js,
      json,
      web.jsx,
      jsx,
      node
    ]
  },
  babel: {
    presets: [
      react-app
    ]
  },
  eslintConfig: {
    extends: react-app
  }
}

build.js

'use strict';

// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production';

// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
  throw err;
});

// Ensure environment variables are read.
require('../config/env');

const path = require('path');
const chalk = require('chalk');
const fs = require('fs-extra');
const webpack = require('webpack');
const config = require('../config/webpack.config.prod');
const paths = require('../config/paths');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
const printBuildError = require('react-dev-utils/printBuildError');

const measureFileSizesBeforeBuild =
  FileSizeReporter.measureFileSizesBeforeBuild;
const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
const useYarn = fs.existsSync(paths.yarnLockFile);

// These sizes are pretty large. We'll warn for bundles exceeding them.
const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;

// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
  process.exit(1);
}

// First, read the current file sizes in build directory.
// This lets us display how much they changed later.
measureFileSizesBeforeBuild(paths.appBuild)
  .then(previousFileSizes => {
    // Remove all content but keep the directory so that
    // if you're in it, you don't end up in Trash
    fs.emptyDirSync(paths.appBuild);
    // Merge with the public folder
    copyPublicFolder();
    // Start the webpack build
    return build(previousFileSizes);
  })
  .then(
    ({ stats, previousFileSizes, warnings }) => {
      if (warnings.length) {
        console.log(chalk.yellow('Compiled with warnings.\n'));
        console.log(warnings.join('\n\n'));
        console.log(
          '\nSearch for the ' +
            chalk.underline(chalk.yellow('keywords')) +
            ' to learn more about each warning.'
        );
        console.log(
          'To ignore, add ' +
            chalk.cyan('// eslint-disable-next-line') +
            ' to the line before.\n'
        );
      } else {
        console.log(chalk.green('Compiled successfully.\n'));
      }

      console.log('File sizes after gzip:\n');
      printFileSizesAfterBuild(
        stats,
        previousFileSizes,
        paths.appBuild,
        WARN_AFTER_BUNDLE_GZIP_SIZE,
        WARN_AFTER_CHUNK_GZIP_SIZE
      );
      console.log();

      const appPackage = require(paths.appPackageJson);
      const publicUrl = paths.publicUrl;
      const publicPath = config.output.publicPath;
      const buildFolder = path.relative(process.cwd(), paths.appBuild);
      printHostingInstructions(
        appPackage,
        publicUrl,
        publicPath,
        buildFolder,
        useYarn
      );
    },
    err => {
      console.log(chalk.red('Failed to compile.\n'));
      printBuildError(err);
      process.exit(1);
    }
  );

// Create the production build and print the deployment instructions.
function build(previousFileSizes) {
  console.log('Creating an optimized production build...');

  let compiler = webpack(config);
  return new Promise((resolve, reject) => {
    compiler.run((err, stats) => {
      if (err) {
        return reject(err);
      }
      const messages = formatWebpackMessages(stats.toJson({}, true));
      if (messages.errors.length) {
        // Only keep the first error. Others are often indicative
        // of the same problem, but confuse the reader with noise.
        if (messages.errors.length > 1) {
          messages.errors.length = 1;
        }
        return reject(new Error(messages.errors.join('\n\n')));
      }
      if (
        process.env.CI &&
        (typeof process.env.CI !== 'string' ||
          process.env.CI.toLowerCase() !== 'false') &&
        messages.warnings.length
      ) {
        console.log(
          chalk.yellow(
            '\nTreating warnings as errors because process.env.CI = true.\n' +
              'Most CI servers set it automatically.\n'
          )
        );
        return reject(new Error(messages.warnings.join('\n\n')));
      }
      return resolve({
        stats,
        previousFileSizes,
        warnings: messages.warnings,
      });
    });
  });
}

function copyPublicFolder() {
  fs.copySync(paths.appPublic, paths.appBuild, {
    dereference: true,
    filter: file => file !== paths.appHtml,
  });
}
Întrebat 05/07/2018 la 20:05
de către utilizator
În alte limbi...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more