摘要：暴露所有內建配置，項目下會新增或對部分配置文件進行修改。開發環境開發時，前端項目和后端項目運行時端口端口不同，存在跨域問題。項目目錄結構優化項目目錄結構優化開發目錄主要是目錄，因此需要修改的目錄主要是目錄。

1) 下載nodejs安裝包：http://nodejs.org/en/download/

nodejs安裝時會同時安裝npm

2) 安裝完成后檢查是否安裝成功

命令行輸入以下命令，查看npm和node版本：
npm -v
node -v

??若未安裝成功可檢查環境變量是否安裝時自動設置成功

??命令行輸入：npm install -g create-react-app

create-react-app：可以用來快速創建react項目
-g：全局安裝create-react-app腳手架工具，這個步驟只需要執行一次

??命令行輸入： npm install express-generator -g

express-generator：可以用來快速創建express應用
-g：全局安裝express-generator腳手架工具，這個步驟只需要執行一次

前端框架：react
服務端：基于node的express框架

??兩者結合快速創建web項目。由于服務端代碼需要部署到服務器，為了方便操作，先創建react項目，然后在react項目目錄下創建express項目，將react的打包目錄設置為express項目下的public文件。

(1)創建react項目（client）

create-react-app myapp

(2)創建express項目（server）

cd myapp
express-generator --view=ejs server 

添加模版引擎：--view=ejs，此處選擇ejs作為模版引擎。還可以選擇pub、jade等其它模版引擎

??使用create-react-app創建的項目，已經把webpack、babel等配置都封裝到依賴項目react-script中，因此在目錄外層無法看到webpack等配置文件。

1）自動生成的項目目錄介紹

A. node_modules：項目依賴包目錄，使用npm install xxx相關命令安裝的依賴都會自動下載到該目錄，無需提交至git；

B. public：公共目錄，該目錄下的文件都不會被webpack進行加載、解析和打包；通過npm run build進行打包時該目錄下的所有文件將會直接被復制到build目錄下；

a) favicon.ico：網站圖標（可替換刪除）

b) index.html：頁面模板，webpack打包后將輸出文件引入到該模板內；index.html中通過環境變量%PUBLIC_URL%指向public目錄路徑；

c) manifest.json：PWA將應用添加至桌面的功能的實現依賴于manifest.json。通過manifest.json文件可以對

C. src: 是源碼目錄，該目錄下除了index.js App.test.js registerServiceWorker.js 文件具有一定意義其余文件都是演示使用可直接刪除。

a) index.js: 是整個項目的入口文件，也是webpack打包的入口文件；

b) App.js：項目創建后，可通過修改此文件來修改頁面內容

c) App.test.js: 測試單元演示文件，暫時并不知道干嘛用；可以直接刪除；

d) registerServiceWorker.js: service worker 是在后臺運行的一個線程，可以用來處理離線緩存、消息推送、后臺自動更新等任務；registerServiceWorker就是為react項目注冊了一個service worker，用來做資源的緩存，這樣你下次訪問時，就可以更快的獲取資源。而且因為資源被緩存，所以即使在離線的情況下也可以訪問應用（此時使用的資源是之前緩存的資源）。注意，registerServiceWorker注冊的service worker 只在生產環境中生效，并且該功能只有在https下才能有效果；

D. .gitignore: 該文件是github過濾文件配置，即指定無需提交至git而忽略的文件，幫助查看方式，git help ignore

E. README.md: 該文件是描述文件

F. package.json: 定義了項目所需要的各種模塊，以及項目的配置信息（比如名稱、版本、許可證等元數據）。部分依賴模塊被隱藏；

G. package.lock.json: 每次通過npm添加依賴或者更新包版本時 npm都會把相關版本信息寫入package.lock.json文件；

2）package.json配置

3）可用腳本命令說明

首先說明：通過npm run 執行下面命令實際上是運行 node_modules/react-srcipt/script下對應的腳本文件；

A.npm run start : 開始項目，通過http://localhost:3000 可訪問項目；

B. npm run build : 項目打包，在生產環境中編譯代碼，并放在build目錄中；所有代碼將被正確打包，并進行優化、壓縮同時使用hash重命名文件；執行該命令前需要在package.json中新增條配置"homepage": "."（上面配置文件已給出）, 同時build后的項目需要在服務器下才能訪問；否則打開的將是空白頁面；

C. npm run test : 交互監視模式下啟動測試運行程序；

D. npm run eject : 將隱藏的配置導出；需要知道的是create-react-app腳手架本質上是使用react-scripts進行配置項目，所有配置文件信息都被隱藏起來(node_modules/react-scripts)；當需要手動修改擴展webpack配置時有時就需要將隱藏的配置暴露出來；特別需要注意的是該操作是一個單向操作，一旦使用eject，那么就不能恢復了(再次將配置隱藏)；

??create-react-app默認生成的是單入口單出口生產環境，統一通過react-script進行管理，無法滿足復雜的多入口項目的需要，因此需要對項目進行配置，使其滿足實際項目需要。可通過npm run eject來暴露所有內建配置，以方便我們對項目的配置進行修改。

2.3.1 npm run eject

??進入myapp根目錄，執行以下命令：npm run eject。暴露所有內建配置，項目下會新增或對部分配置文件進行修改。
??根目錄下新增config（配置文件）和script（腳本文件）目錄。

注意：此操作不可逆，一旦執行無法回退；
修改配置的其它方法：也可考慮采用react-app-rewired插件來實現配置覆蓋。

2.3.2 多入口配置

項目默認只有index.js（src目錄下）這一個入口文件。

以在src目錄下新增入口文件admin.js為例。
需修改config中的配置文件來：

1）修改webpcak.config.dev.js文件

A. 修改entry（新增js文件入口配置）

//這里我已經寫成對象格式了
//有多少個頁面就添加多少個key:value
//這里我已經添加了一個admin
//數組中的paths.appSrc+"/admin.js"就是這個html頁面的入口文件
    entry: { 
        index:[
            require.resolve("./polyfills"),
            require.resolve("react-dev-utils/webpackHotDevClient"),
            paths.appIndexJs,
        ],
        admin:[
            require.resolve("./polyfills"),
            require.resolve("react-dev-utils/webpackHotDevClient"),
            paths.appSrc + "/admin.js",
        ]
    }

B. 修改plugins中的HtmlWebpackPlugin(配置html模版文件)

//多少個頁面就new 多少個 HtmlWebpackPlugin 
//并且在每一個里面的chunks都需要和上面的entry中的key匹配
//例如上面entry中有index和admin這兩個。
//這里的chunks也需要是index和admin
    new HtmlWebpackPlugin({
        inject: true,
        chunks:["index"],
        template: paths.appHtml,
    }),
    new HtmlWebpackPlugin({
        inject: true,
        chunks:["admin"],
        template:paths.appHtml,
        filename:"admin.html"
    }),

C.修改output

//由于原配置入口文件只有一個，因此output中的filename是寫死的，
//增加多入口之后，輸出文件名被寫死，對應生成了多個boundle.js，
//后面生成的會覆蓋前面生成的文件，所以需要制定輸出的文件名不能寫死
output: {
    path:paths.appBuild,
    pathinfo: true,
    filename: "static/js/[name].bundle.js",
    chunkFilename: "static/js/[name].chunk.js",
    publicPath: publicPath,
    devtoolModuleFilenameTemplate: info =>
    path.resolve(info.absoluteResourcePath).replace(//g, "/"),
 },

2） 修改config下webpack.config.prod.js文件

A 修改entry

//這里的paths.appIndexJs和paths.appSrc+"/admin.js"是入口文件
    entry:{
        index:[
            require.resolve("./polyfills"), 
            paths.appIndexJs
        ],
        admin:[
            require.resolve("./polyfills"),
            paths.appSrc+"/admin.js"
        ]
    }

B 修改plugins中的HtmlWebpackPlugin

//和開發環境下一樣，多少個html就new多少個 HtmllWebpackPlugin，每個都需要指定chunks,并且指定filename，在minify中配置是否壓縮js、css等，這是生產環境下的配置
    new HtmlWebpackPlugin({
      inject: true,
      chunks:["index"],
      template: paths.appHtml,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
    }),
    new HtmlWebpackPlugin({
      inject: true,
      chunks:["admin"],
      template: paths.appHtml,
      filename:"admin.html",
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
    }),

3）在開發環境中如果想通過地址訪問不同頁面，需要修改webpackDevServer.config.js

A 修改historyApiFallback

//這里的rewrites:[ {from: /^/admin.html/, to: "/build/admin.html" }] 數組里面是一個個對象，
//對象中前面的值是在開發時候訪問的路徑，例如 npm run start之后會監聽 localhost:3000 ，
//此時在后面加上 /admin.html就會訪問admin.html中的內容，默認是訪問index.html；
//數組中的第二個值是生產環境下的文件的路徑。
//如果有很多頁面，就在rewrites中添加更多對象
    historyApiFallback: {
      disableDotRule: true,
      rewrites: [
        { from: /^/admin.html/, to: "/build/admin.html" },
      ]
    },

2.3.3 前端跨域問題配置

生產環境：本文中的項目，由于打包后的代碼會放在server目錄下的public文件夾下，也就是打包后的代碼和server在同域下，不存在跨域問題。
開發環境：開發時，前端react項目和后端express項目運行時端口端口不同，存在跨域問題。

開發環境跨域問題解決辦法：在package.json中加入："proxy":http://localhost:5000 //后端所在域。
如果需要后端存在多個域：

//package.json中加入
 "proxy": {
     "/api1": {
         "target": "http://api1.xxxx.com",
         "changeOrigin":true
     },
     "/api2":{
         "target":"http://api2.xxxx.com",
         "changeOrigin":true
     }
 }

2.3.4 文件路徑簡化配置

??當頁面嵌套過深時，import Apis from "../../common/apis"，可通過webpack配置來簡化路徑。

//修改webpack.config.dev與webpack.config.prod兩個文件，加入相同配置
//增加方法
function resolve(dir) { 
    return path.join(__dirname, "..", dir) 
}
//修改 alias配置
alias: {
     "react-native": "react-native-web", 
    //加入配置
     "@src": resolve("src")
}

添加上述配置后，引入文件方式：import Apis from "@src/common/apis"

缺點：此方法能簡化引用方法，但無法通過快捷鍵進入該引用文件。

2.3.5 webpack打包體積詳情分布

1）安裝：npm install –save-dev webpack-bundle-analyzer

2）配置：

//修改webpack.prod.conf.js文件，增加如下內容
const?BundleAnalyzerPlugin?=?require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
module.exports?=?{
??plugins:?[
????new?BundleAnalyzerPlugin()
??]
}
//修改package.json文件，在scripts中增加如下命令
“analyz”: “NODE_ENV=production npm_config_report=true npm run build”

3）運行npm run build或npm run analyz，瀏覽器會自動打開127.0.0.1:8888，如下頁面，可查看打包后文件分布，以及打包文件大小。

2.3.6 webpack構建打包優化

1）使用UglifyJSPlugin壓縮js文件

安裝方法: npm install uglifyjs-webpack-plugin --save-dev?

在webpack.config.prod.js文件中添加
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
module.exports = {
    plugins: [
???        new UglifyJSPlugin(),
?    ]
}

2）生產環境去掉map文件：縮短build時間

//修改webpack.config.prod.js文件：
//注釋devtool:shouldUseSourceMap? "source-map":false
devtool:false,//增加

3）添加cache-loader，減少打包時間

//修改webpack.config.dev.js文件：
module:{
    rules:[{
      use:[
              //添加在最前面
          "cache-loader", 
      ]
    }]
}

在其它加載程序加載之前添加以將結果緩存在磁盤上

4）提取公共包：提取多個入口引入的公共依賴包

修改webpack.config.prod.js文件

//修改entry文件，
entry: 
//這里的paths.appIndexJs和paths.appSrc+"/admin.js"依然是每個html的入口文件
{
       index:[
           require.resolve("./polyfills"),
           paths.appIndexJs,
        ],
        admin:[
            require.resolve("./polyfills"),
            paths.appSrc+"/admin.js"
        ],
        //增加vendor
        vendor:["react","react-dom"]
},
//修改plugin
plugin:{
    //新增以下代碼
    new webpack.optimize.CommonsChunkPlugin({
      name: ["vendor"],
      // filename:"static/js/vendor.[chunkhash:8].js",
      // minChunks: 3  //三方庫在邏輯代碼中被調用兩次(數字可以自定義)， 將公共的代碼提取出來
    }),
/* 防止 vendor hash 變化 */
  // extract webpack runtime and module manifest to its own file in order to
  // prevent vendor hash from being updated whenever app bundle is updated
  new webpack.optimize.CommonsChunkPlugin({
    name: "manifest",
    chunks: ["vendor"]
  }),
}
//修改plugins中的HtmlWebpackPlugin，在chunks中添加需要引入的公共包，
//其中公共包需放在后面，使其在加入html頁面時能在其它js文件前面 
new HtmlWebpackPlugin({    inject: true,    chunks:["index","vendor"],    template: paths.appHtml,    minify: {        removeComments: true,        collapseWhitespace: true,        removeRedundantAttributes: true,        useShortDoctype: true,        removeEmptyAttributes: true,        removeStyleLinkTypeAttributes: true,        keepClosingSlash: true,        minifyJS: true,        minifyCSS: true,        minifyURLs: true,    },}),new HtmlWebpackPlugin({    inject: true,    chunks:["admin","vendor"],    template: paths.appHtml,    filename:"admin.html",    minify: {        removeComments: true,        collapseWhitespace: true,        removeRedundantAttributes: true,        useShortDoctype: true,        removeEmptyAttributes: true,        removeStyleLinkTypeAttributes: true,        keepClosingSlash: true,        minifyJS: true,        minifyCSS: true,        minifyURLs: true,    },}),

2.3.7 build命令

??命令行輸入：npm run build，出現以下文件夾，其中admin.html和index.html分別是不同的入口。

2.3.8 修改build后資源文件根路徑

??可在path.js文件中修改打包后資源文件路徑，例如修改path.js文件中getServedPath方法中的‘/’，改為‘/build’，則打包后資源文件的路徑會加上build，修改前資源文件路徑中是沒有build的。

??本文中react+express的項目，無需修改資源文件根路徑，因為express會配置資源文件所在目錄為。

2.4.1 nodemon熱啟動

??express框架中啟動項目后，文件更新后需要手動重啟node服務，修改才會生效。使用nodemon可以實現熱啟動，文件修改后自動重啟使修改生效。
??在server根目錄（express項目根目錄）下運行以下命令，安裝nodemon：
npm --save-dev install nodemon

//修改server（express項目根目錄）目錄下的package.json文件，將node改為nodemon
//將"start":"node ./bin/www"改為：
"start":"nodemon ./bin/www"

2.4.2 react打包目錄相關修改

??為了方便，將react打包目錄修改為server目錄下public目錄，可以避免每次打包后都需要將build目錄下的文件在復制到server目錄下。

//修改path.js文件，module.exports中的appBuild變量
//將appBuild: resolveApp("build"),改為
appBuild: resolveApp("server/public"),

2.4.3 在react的package.json中增加server的啟動命令

??在webstorm中，會自動出現根目錄下package.json中的scripts下的npm命令，為了方便啟動server，可在react 根目錄下的package.json文件中增加server的啟動項。

"scripts": {
    "start": "node scripts/start.js",
    "server-start": "cd server && npm run start",//增加server啟動命令
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },

2.5.1 react-developer-tools

??瀏覽器擴展工具中搜索此插件并安裝，可以查看到react組件結構

2.5.2 chrome下的source map

??chrome引入了source-map文件，可以查看打包前代碼。唯一要做的就是配置webpack自動生成source-map文件，這也很簡單，在webpack.config.js中增加一行配置即可（需要重新啟動webpack-dev-server使配置生效），create-react-app已做此配置，因此不需要再修改。

2.5.3 Eslint(javascript代碼檢查工具)

??Create-react-app已安裝Eslint，可對eslint進行自定義配置規則。

2.6.1 react項目目錄結構優化

??開發目錄主要是src目錄，因此需要修改的目錄主要是src目錄。

|——src
|————|common //公共組件目錄，如http.js、cookie.js等
|————|components //基礎組件、業務組件、業務代碼抽象出的一些基礎類，例如每個頁面可以在此目錄下建立一個文件存放相關組件。
|————|layouts //布局相關組件及其樣式文件，如header.js、footer.js、menu.js等
|————|styles //公共樣式文件
|————|static //公共的靜態資源文件，如公共的圖片資源文件等
|————|views //頁面入口文件，可與comonents中的頁面組件對應

如果使用了router和redux可在src下增加目錄：

redux：redux應用數據狀態管理文件，包括actions、reducers、stores三個子目錄

routes：路由管理模塊

containers：應用根容器，用于連接redux和router

2.6.2 express項目目錄結構優化

|——server // express項目根目錄
|————|bin 
|——————|www  //服務器相關配置文件
|————|controllers //控制器層，處理前端請求
|————|models //數據庫操作相關文件
|————|node_modules //npm包安裝目錄
|————|public //react打包目錄，存放所有的html，js/css/圖片等資源文件
|————|routes // 路由文件目錄
|——————|api.js //api請求路由文件
|——————|pages.js // 頁面請求路由文件
|————|utils // 公共文件目錄
|——————|config.js //各種常量或公共方法
|——————|db.js // 數據庫訪問方法封裝
|——————|http.js //http請求方法封裝
|————|views // express框架自帶，由于打包后的文件全放在public目錄下，因此這個文件可不用了
|————|app.js //入口文件
|————|package.json 
|————|package-lock.json