javascript - 如何将 create-react-app 使用的错误页面合并到自定义项目中？

Question

当您使用 create react app 并在代码中出现错误时，您会看到这个非常详细和精确的错误页面:

如何将此错误页面合并到我自己的自定义项目中。我怀疑这需要一种 webpack 插件。我项目中的工具是:

1. node.js
2. express.js
3. 网页包
4. 通天塔
5. 萨斯
6. react
7. 终极版

这是我当前的 webpack 配置:

import webpack from 'webpack'
import autoprefixer from 'autoprefixer'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import CopyWebpackPlugin from 'copy-webpack-plugin'
import FriendlyErrorsPlugin from 'friendly-errors-webpack-plugin'


import helpers from './helpers'

const NODE_ENV = process.env.NODE_ENV
const isProd = NODE_ENV === 'production'

module.exports = {
  entry: {
    'app': [
      helpers.root('client/app/index.jsx')
    ]
  },

  output: {
    path: helpers.root('dist'),
    publicPath: '/'
  },

  resolve: {
    extensions: ['.js', '.jsx', '.json', '.css', '.scss', '.html'],
    alias: {
      'app': 'client/app'
    }
  },
  stats: {
    colors: true,
    modules: true,
    reasons: true,
    errorDetails: true
  },
  devtool: 'cheap-module-eval-source-map',
  module: {
    rules: [
      // absolutely necessary for font-awesome
      // you NEED the file-loader & css-loader modules
      {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
        loader: 'file-loader'
      },
      // JS files
      {
        test: /\.jsx?$/,
        include: helpers.root('client'),
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            // options: {
            //   "presets": [["env", {"modules": false}], "react"]
            // }
          }
        ]
      },

      // SCSS files
      // or test: /(\.scss|\.sass)$/,
      // or test: /.(scss|sass)$/,
      // or test: /.s[ac]ss$/,
      // verdict: none of the above required!
      {
        test: /.sass$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                'sourceMap': true,
                'importLoaders': 1
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: () => [
                  autoprefixer
                ]
              }
            },
            'sass-loader'
          ]
        })
      }
    ]
  },

  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),

    new FriendlyErrorsPlugin({
      clearConsole: <false></false>
    }),

    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(NODE_ENV)
      }
    }),

    new HtmlWebpackPlugin({
      template: helpers.root('client/public/index.html'),
      inject: 'body'
    }),

    new ExtractTextPlugin({
      filename: 'css/[name].[hash].css',
      disable: !isProd
    }),

    new CopyWebpackPlugin([{
      from: helpers.root('client/public')
    }])
  ]
}

Answer 1

这就是您要找的包裹。希望这会有所帮助。

链接 - react-error-overlay

包裹也放在这里 - https://github.com/facebook/create-react-app/tree/next/packages