實現簡單元件到部署伺服器——react

本人工作棧為dva+antd，使用阿里開源出來的元件有一段時間之後，決定不依賴阿里的框架自己打個環境寫一些元件出來，一來為了熟悉工作流程，二來也是為了更好的理解原理，從而更好的滿足工作中的需求

二次元萌圖

原始碼地址：

預覽地址：  (目前只相容chrome和IEedge)

1. 技術點 react + webpack + antd

2. 學習流程

• 首先電腦上要有nodejs環境，本文並不涉及nodejs，主要是用nodejs環境中的npm安裝需要的依賴包（nodejs安裝即可，npm如果在下載包的時候很慢，可以將映象換成淘寶的映象）

• npm i create-react-app -g 全域性安裝create-react-app腳手架

• create-react-app建立自己的工程檔案

• 寫自己的webpack配置檔案

• 跨域請求時，在webpack中配置代理，在伺服器上採用nginx代理轉發

• 打包

• 部署到伺服器中

3. 詳解

安裝nodejs環境和用create-react-app建立react腳手架過程省略，因為比較簡單，安裝都比較方便，不會出什麼問題

• webpack配置檔案

  devServer: {
  contentBase: './public',
  publicPath: '/',
  historyApiFallback: true,
  inline: true,
  proxy: {
    '/search/*': {
      target: 'https://image.baidu.com',
      changeOrigin: true
    }
  }
  },<!--當訪問/search/路徑下的所有url時，均走image.baidu.com這個域名--&gt

1. 對webpack簡單的理解可以參考博文：；

2. 在本程式中的一個難點在於既想要引入antd的樣式檔案，又想要使用css modules,本程式中的解決方案就是針對不同目錄中的css檔案分別進行匹配，antd元件中的樣式檔案一定都在node_modules資料夾中，而本地自己寫的檔案一定都在src資料夾中，具體解決方案詳見；

3. 在檔案配置中遇到的坑詳見 ；

4. 遇到跨域問題在本地的解決方案為在本地配置代理：

部署伺服器

伺服器申請的為centos阿里雲伺服器，將打包好的靜態檔案部署在nginx中，nginx伺服器預設監聽80埠，啟動nginx時可能訪問不到，這時需要在“安全組規則”中新增一條規則：

nginx監聽80埠

作者：jdkwky
連結：