效果展示:http://m.penkuoer.com/
在rails5之后可以直接使用前端js框架进行spa应用的处理,集成了yarn做js插件管理。在搭建react项目的时候如果为了省事可以使用dva进行项目创建。

1. 创建rails项目

   rails new rails-dva --webpack=react # 创建rails项目,加入webpack和react基础插件
   

2. 修改相关代码,开启前端框架引用

   rails g controller home # 创建控制器,并修改相关代码
   

   config/routes.rb文件

   Rails.application.routes.draw do
     root 'home#index'
     # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
     resource :home
   end
   

   app/views/home/index.html.erb文件

   <div id="root"></div>
   <%= javascript_pack_tag 'application' %>
   

   启动代码看下效果

   rails s # 启动rails开发服务器
   ./bin/webpack-dev-server    # 启动webpack开发服务器
   # 访问 http://localhost:3000 查看效果
   

3. 安装dva,修改相关代码

   yarn add dva
   # 在app/javascript/packs目录下创建dva的入口文件
   

   app/javascript/packs/application.js文件

   import dva from 'dva';
   
   const app = dva();  # 创建dva项目
   app.router(router); # 引入路由
   app.start('#root'); # 启动项目
   

   app/javascript/packs/router.js文件

   import React from 'react';
   import {Router, Route, IndexRoute} from 'dva/router';
   import IndexPage from './routes/IndexPage';
   
   // IndexRoute 默认加载的地址
   function RouterConfig({history}) {
       return (
           <Router history={history}>
               <Route path="/" component={IndexPage} />
           </Router>
       );
   }
   
   export default RouterConfig;
   

   app/javascript/packs/routes/IndexPage.js文件,页面文件

   import React from 'react';
   function IndexPage() {
       return <h1>我是首页</h1>
   }
   
   export default IndexPage;
   

4. 修改es6语法编译时的配置问题,修改后的文件如下
   .babelrc文件,需要安装相关插件
   babel-preset-es2015,babel-preset-stage-0,babel-plugin-transform-runtime

   {
     "presets": [
       [
         "env",
         {
           "modules": false,
           "targets": {
             "browsers": "> 1%",
             "uglify": true
           },
           "useBuiltIns": true
         }
       ],
       "react",
       "stage-0",
       "es2015"
     ],
     "plugins": [
       "syntax-dynamic-import",
       [
         "transform-class-properties",
         {
           "spec": true
         }
       ],
       "transform-runtime"
     ]
   }
   

5. 修改webpack中配置文件,解决css引入的问题

   config/webpack/loaders/sass.js

   const ExtractTextPlugin = require('extract-text-webpack-plugin')
   const {env} = require('../configuration.js')
   
   module.exports = {
     test: /\.(scss|sass|css)$/i,
     // use: ExtractTextPlugin.extract({
     //   fallback: 'style-loader',
     //   use: [
     //     { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production',modules: true, } },
     //     { loader: 'postcss-loader', options: { sourceMap: true, modules: true, } },
     //     'resolve-url-loader',
     //     { loader: 'sass-loader', options: { sourceMap: true, modules: true, } }
     //   ]
     // })
     use: [
       require.resolve('style-loader'),
       {loader: 'css-loader', options: {minimize: env.NODE_ENV === 'production', modules: true,}},
       {loader: 'postcss-loader', options: {sourceMap: true, modules: true,}},
       'resolve-url-loader',
       {loader: 'sass-loader', options: {sourceMap: true, modules: true,}}
     ]
   };