Rails + React +antd + Redux环境搭建

Posted 2020-09-14 tenfee

 前提条件：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 后将看到如下内容