Rails + React +antd + Redux环境搭建

前提条件：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 > 62.bundle install安装gem包3.rails generate react_on_rails:install   or  rails generate react_on_rails:install --redux4.进入项目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环境搭建相关推荐

typescript+react+antd基础环境搭建
typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接这里module moduleResolution的配置都会影 ...
React系列---Webpack环境搭建（二）不同环境不同配置
React系列---Webpack环境搭建(一)手动搭建 React系列---Webpack环境搭建(二)不同环境不同配置 React系列---Webpack环境搭建(三)打包性能优化实际项目中,往 ...
React全家桶环境搭建过程
环境搭建 1.从零开始搭建webpack+react开发环境 2.引入Typescript 安装依赖 npm i -S @types/react @types/react-dom npm i -D t ...
react + antd pro 项目搭建及发布流程
#antd Pro 项目环境搭建 ##一.搭建项目参考网址:https://pro.ant.design/docs/deploy-cn ###1.安装从 GitHub 仓库中直接安装最新的脚手架代 ...
React Native windows环境搭建
1.首先准备下载必须的依赖:Node.JDK .Android Studio.夜神模拟器 ①Node可以直接到官网下载,版本必须大于14,我这边用的是v16.15.1 ②Jave JDK,我直接在 ...
[深入React] 1. 开发环境搭建
React环境其实很简单(不兼容ie8): <!DOCTYPE html> <html> <head><title>React</title> ...
React Native 安卓环境搭建
基础环境必须安装的依赖有:Node.js.Yarn 和 React Native 脚手架.这是运行 RN 的基础 Node.js Node.js 的版本应大于等于 12,推荐安装 LTS 版本(去N ...
React Native Windows 环境搭建（适合有Android 开发基础的同学）
1.安装python2.x https://www.python.org/downloads/release/python-2718/ 2.安装NodeJS http://nodejs.cn/down ...
React Native开发环境搭建
1.安装Homebrew,简称brew,是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或者卸载软件 2.安装node,brew install node 3.使用 homebrew 安 ...

Rails + React +antd + Redux环境搭建

Rails + React +antd + Redux环境搭建相关推荐

最新文章

热门文章