rails5.1 webpacker尝试

rails5.1， 主题是Loving Javascript，并且在rails的项目里融入了webpack, yarn此类前端框架中最强大的工具，先不管这么做有没有意义，上手试一试再说。

第一步，安装
首先确保你的电脑里安装的node，以及yarn,这里就不做介绍了，百度node安装就行了
在使用rails5.1版本的新项目，只需要

rails new [your_project] --webpack

就可以了。
5.1版本前的rails想要使用，修改Gemfile
gem 'rails', '5.1'
gem ‘webpacker'

bundle update rails

第二步，初始化webpacker和yarn

rails webpacker:check_yarn

项目根目录会出来package.json和yarn.lock文件, 这两个文件就是node版的Gemfile和Gemfile.lock, 你可以通过yarn add xxx 来安装js的扩展，5.1最大的目的就是要把Gemfile里面的关于’js'的一切依赖抽出来，交由yarn来管理，顺便提一下，假如你的rails版本是5.1的，你会发现默认情况下是没有jquery的，你需要自己手动在package.json里面添加，或者

yarn add jquery

然后把application.js里面的’jquery_ujs’替换成’rails_ujs’

第三步，开始使用webpacker
Rails webpacker 里面默认就有一些task,用于快速初始化一套前端框架比如

rails webpacker:install:vue

rails webpacker:install:react

…

这里我们先尝试的是react

运行完之后会初始化一套react的框架。

第四步，查看项目结构
使用了webpacker之后，就不能用以前的思路来写rails了，先来看下目录结构
除了根目录下多了一些node相关的文件，node_modules，package.json等等之外，首先要关注的的是app/javascript/packs这个文件夹

packs这个文件夹就是用来存放入口文件的
再来看下application.html.erb

重点是那个’javascript_pack_tag’，这也是5.1中新加入的方法，用来引用webpack的入口文件的

第五步，开始编写基于react的webpacker的rails项目
在这之前你可能需要先了解一下react
http://www.ruanyifeng.com/blog/2015/03/react.html

首先，打开routes.rb文件，写一个默认的root_path，因为我们需要一个入口来作为webpacker的容器

Rails.application.routes.draw do
  root to: 'home#index’
end

$ rails g controller home index

app/controllers/home_controller

class HomeController < ApplicationController
  def index  
  end
end

app/views/home/index.html.erb
<div id="root"></div>

如此一来我们的容器就准备好了，现在打开packs文件夹下的’index.jsx'，别忘了它位于app/javascript/packes，一开始还是很容易找不到的。

app/javascript/packs/index.jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom’

ReactDOM.render(<div>Hello World</div>, document.getElementById('root'));

到此为止，我们便完成了react on rails的初步开发环境，开始运行我们的项目！

开发模式下我们需要运行两个窗口，一个是webpack-dev-server，它负责监控和打包我们的js文件，另一个则是rails server

$ bin/webpack-dev-server

再开一个终端

$ rails s

打开http://localhost:3000

成功了！

第六步，react-router的基本使用，以及前后分离的项目结构
未完待续...

第七步 production模式的部署
未完待续...