從樣板（React）項目中刪除服務器端

Question

我已經克隆並安裝了https://github.com/react-boilerplate/react-boilerplate項目，但我只需要項目的客戶端，因為我將使用另一個已經創建的服務器（express）。 這是我的 package.json

<code>


  "scripts": {  enter code here
       "analyze:clean":"rimraf stats.json",
       "preanalyze":"npm run analyze:clean",
       "analyze":"node ./internals/scripts/analyze.js",
       "extract-intl":"node ./internals/scripts/extract-intl.js",
       "npmcheckversion":"node ./internals/scripts/npmcheckversion.js",
       "preinstall":"npm run npmcheckversion",
       "prebuild":"npm run build:clean",
       "build":"cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout",
       "build:clean":"rimraf ./build",
       "start":"cross-env NODE_ENV=development node server",
       "start:tunnel":"cross-env NODE_ENV=development ENABLE_TUNNEL=true node server",
       "start:production":"npm run test && npm run build && npm run start:prod",
       "start:prod":"cross-env NODE_ENV=production node server",
       "presetup":"npm i chalk shelljs"
    }
</code>    

這是我的項目文件結構：[在此處輸入圖像描述][1]

  [1]: https://i.stack.imgur.com/oEZuw.jpg

Answer 1

將此代碼用於 Package.json。 這是用於帶有 webpack、Redux、babel 的簡單 CSR React 項目。

{
  "name": "startup",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://localhost:3000",
  "dependencies": {
    "@babel/polyfill": "^7.7.0",
    "axios": "^0.19.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "env-cmd": "^10.0.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-data-components": "^1.2.0",
    "react-dom": "^16.8.6",
    "react-hot-loader": "^4.12.18",
    "react-redux": "^7.1.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "redux": "^4.0.4",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "styled-components": "^4.4.1"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-plugin-lodash": "^3.3.2",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^3.2.0",
    "prettier": "1.19.1",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  },
  "scripts": {
    "dev": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

並使用它來配置您的 webpack 將以下代碼添加到您的新的/現有的 webpack.config.js 以運行您的代碼以用於 prod-build 和 dev(localhost)。

const path = require('path');
const HWP = require('html-webpack-plugin');
const webpack = require('webpack');
require("@babel/polyfill");
var node_modules_dir = path.resolve(__dirname, 'node_modules');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry: ['babel-polyfill', './src/index.js'],
    output: {
        filename: 'build.js',
        path: path.join(__dirname, '/dist/')
    },
    optimization: {
        splitChunks: {
          // include all types of chunks
          chunks: 'all'
        }
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: node_modules_dir,
            loader: 'babel-loader',
            query: {                    
                plugins: ['transform-class-properties']
            }
        }, {
            test: /\.*css$/,
            use: ['style-loader', 'css-loader']

        }, {
            test: /.(png|jpe?g|gif|svg|ico)$/,
            use: 'file-loader?name=assets/images/[hash].[ext]'
        }, {
            test: /.(woff|woff2|otf|ttf|eot)$/,
            use: 'file-loader?name=assets/fonts/[hash].[ext]'
        }]
    },
    devServer: {
        publicPath: '/',
        historyApiFallback: true,
    },
    plugins: [
        new CleanWebpackPlugin(),
        new webpack.ProgressPlugin(),
        new HWP({
            template: './src/index.html',
            filename: 'index.html'
        })
    ]
}

Answer 2

如果您只需要從頭開始一個前端 React 項目，您可以使用create-react-app工具創建一個。

如果是，只需使用這樣的工具

yarn create react-app my-app