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

?1.nvm、node

?2.npm or yarn裝一個就好

?3.rvm、ruby on rails

?4.foreman

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

二、引入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" ????? }, ], }

三、運行服務
1.foreman start -f Procfile.dev 2.?訪問 http://localhost:3000/hello_world 后將看到如下內容

?

? ?

轉載于:https://www.cnblogs.com/andfly/p/6704799.html

總結

以上是生活随笔為你收集整理的Rails + React +antd + Redux环境搭建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。