react搭建後臺管理系統

一、專案前期的準備工作

• 建立git專案並初始化

• 安裝yarn：npm install yarn -g

• 安裝node.js

• yarn init對專案進行初始化，並在命令列根據提示進行必要的設定

"name": "cms-react",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "倉庫地址",
  "author": "git使用者名稱",
  "license": "MIT",
  "private": true  // 是否是私有倉庫
 

• webpack安裝與配置

  • yarn安裝：yarn add [email protected] --dev
  • 在專案根目錄創建出口檔案webpack.config.js

  const path = require('path');
  const webpack = require('webpack'); // 引入webpack
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  
  
  module.exports = {
    entry: './path/to/my/entry/file.jsx', // 專案的入口檔案路徑
    output: {
      path: path.resolve(__dirname, 'dist'), // 打包後的專案檔案路由，一般不用變
      publicPath: '/dist/', // 公共路徑
      filename: 'js/app.js' // 打包後的入口檔名，根據專案實際情況修改
    },
    // babel-loader配置
    module: {
      rules: [
        // react(jsx)檔案的處理配置
        {
          test: /\.m?jsx$/,
          exclude: /(node_modules)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react'],
            }
          }
        },
        // css檔案的處理配置
        {
          test: /\.css$/i,
          use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
          })
        },
        // sass檔案的處理配置
        {
          test: /\.scss$/i,
          use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: ["css-loader", 'sass-loader']
          })
        },
        // url-loader(圖片)的處理配置
        {
          test: /\.(png|jpg|gif)$/i,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 8192, // 如果超過這個值才會單獨生成一個檔案
                name: 'resource/[name].[ext]' // 檔名及擴充套件
              },
            },
          ]
        },
        // 字型圖示的配置
        {
          test: /\.(eot|svg|ttf|woff|woff2|otf)$/i,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 8192,
                name: 'resource/[name].[ext]' // 檔名及擴充套件
              },
            },
          ]
        },
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        // 處理html檔案
        template: './src/index.html'  // 專案中自定義模板的路徑設定
      }),
      // 處理css檔案
      new ExtractTextPlugin("css/[name].css"),
      // 提出公共模組
      new webpack.optimize.CommonsChunkPlugin({
        name: "common",
        filename: 'js/base.js'
      })
    ],
    // devServer配置
    devServer: { 
      port: 8086  // 自定義埠號，和主要的軟體服務埠號不能衝突
    },
  };
   
  

  • 使用webpack打包：專案中webpack沒有全域性安裝，那麼打包的命令為node_modules/.bin/webpack

  • 安裝外掛HtmlWebpackPlugin，在Webpack.config.js配置檔案中新增安裝的外掛名。安裝命令：npm uninstall html-webpack-plugin npm install [email protected] -D，這裡注意版本問題，如果版本有問題，在打包的時候會報錯:TypeError: Cannot read property 'make' of undefined，安裝合適的版本即可

  • 安裝外掛babel-loader，安裝命令為： yarn add -D babel-loader @babel/core @babel/preset-env，也可以使用yarn add babel-core@版本號安裝多個版本的core

  • 安裝配置react，命令：

    • npm install --save-dev @babel/preset-react
    • yarn add [email protected] [email protected]

  • 安裝並配置css外掛，命令：yarn add style-loader css-loader --dev

  • 安裝extract-text-webpack-plugin外掛，命令：yarn add [email protected] --dev。在打包的時候可能會報錯： (node:16920) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead，或者報錯：TypeError: Cannot read property 'thisCompilation' of undefined

    • 原因：webpack版本在4.0以上，版本不適配
    • 解決辦法：
      • 先解除安裝執行 npm uninstall --save-dev extract-text-webpack-plugin
      • 再安裝 npm install --save-dev extract-text-webpack-plugin

  • 安裝sass-loader，命令：yarn add [email protected] --dev

  • sass-loader生效的前提是需要安裝node-sass， 命令為: yarn add node-sass --dev，這個包和其他的包不同，其他的包都是呼叫檔案，這個包需要呼叫作業系統的東西。

  • 安裝url-loader和file-loader用於對圖片進行處理，命令為：yarn add [email protected] [email protected] --dev

  • 安裝字型圖示庫，命令為：yarn add font-awesome

  • 提出處理公共模組外掛，需要定義在外掛列表中，並且需要提前引入webpack

  const webpack = require('webpack');
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
          name: "common",
          filename: 'js/base.js'
    })
  ]
  

  • 正常情況下的打包檔案命令是：
    • node_modules/.bin/webpack（僅在專案中安裝webpack時）
    • webpack（全域性安裝webpack時）
  • 為了方便打包和檢視檔案，需要引入webpack-dev-server，做到檔案改動服務實時更新的效果
    • 命令： yarn add [email protected] --dev
    • 配置：
      • 在output中配置：publicPath: '/dist/'
      • 在plugins後新增配置資訊
    • 安裝成功後的打包命令為：node_modules/.bin/webpack-dev-server，啟動服務
  • 啟動服務後，如果在專案的除錯中報錯：Refused to apply style from 'http://localhost:8080/dist/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. ，解決辦法是找到.html檔案去掉rel="stylesheet"重新整理即可