Rails + React +antd + Redux環境搭建

 前提條件：node和ruby on rails必須已經安裝好（相關安裝流程再也不此處介紹）

 1.nvm、node

 2.npm or yarn裝一個就好

 3.rvm、ruby on rails

 4.foreman

1、新建一個rails項目後加入react gem包

1.Gemfile文件添加gem 'react_on_rails', '~>6'         # use latest gem version > 6
2.bundle install安裝gem包
bundle install安裝gem包3.rails generate react_on_rails:install   or  rails generate react_on_rails:install --reduxreact_on_rails:install --redux
4.進入項目client文件夾下執行 npm install  or  yarn install  

2、引入antd

1.在項目client文件夾下執行：
  npm install antd --save
  npm install babel-plugin-antd --save
  npm install babel-plugin-import --save    (該插件是用來按需加載 antd 的腳本和樣式的)
  npm install style-loader -save
  npm install css-loader -save

2.修改client文件夾下 .babelrc 文件爲
  {
    "presets": ["es2015", "stage-2", "react"],
    "plugins": [["antd", [{ "libraryName": "antd", "style": "css" }]]]   （該行爲新增行）
  }

3.編輯webpack.config.js文件，在module的rules中新增以下紅色字體內容

  module: {

    rules: [

      {

        test: require.resolve('react'),

        use: {

          loader: 'imports-loader',

          options: {

            shim: 'es5-shim/es5-shim',

            sham: 'es5-shim/es5-sham',

          }

        },

      },

      {

        test: /\.jsx?$/,

        use: 'babel-loader',

        exclude: /node_modules/,

      },

      {

        test: /\.css$/,

        loader: 'css?sourceMap&modules&localIdentName=[local]___[hash:base64:5]!!',

        exclude: /node_modules/

      },

      {

        test: /\.(css|less)$/,

        loader: "style-loader!css-loader"

      },

    ],

  }

3、運行服務
3、運行服務

1.foreman start -f Procfile.dev

2. 訪問 http://localhost:3000/hello_world 後將看到以下內容

2. 訪問 http://localhost:3000/hello_world 後將看到以下內容