1、安装node和yarn
yarn的安装:
- macos可以使用homebrew包管理器来安装，
brew install yarn
- 使用shell脚本安装：
curl -o- -L https://yarnpkg.com/install.sh | bash
- 安装完成后在终端中设置环境变量
export PATH="$HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH"
- 测试yarn的安装
yarn --version
详见：
node的安装：
brew install nodejs
2、rails 5.1版本 webpacker
- 创建新的项目
rails new [your_project] --webpack
-
初始化
webpacker和yarn
初始化完成会有package.json文件，就是node版的gemfile文件。如果你的版本是5.1的默认情况下是没有jquery的，可以手动在
paskage.json中添加或者使用yarn add jquery,将application.js里面的jquery_ujs替换成rails_ujs。
3、开始使用webpacker
Rails webpacker里面默认就有一些task,用于快速初始化一套前端框架比如:
rails webpacker:install
rails webpacker:install:vue
rails webpacker:install:react
运行完之后会初始化一套react/vue框架。
4、查看项目结构：
根目录下多了一些node相关的文件，node_module,package.json。
如：app/javascript/packs
packs这个文件夹就是用来存放入口文件的。
5.1中新加入的放法，用来引用webpack的入口文件，
如： <%= javascript_pack_tag 'index' %>
5、 举例说明：
routes.rb
Rails.application.routes.draw do
root to: 'home#index'
end
rails g controller home index
home_controller.rb
class HomeController < ApplicationController
def index
end
end
home/index.html.erb
<div id = "root"></div>
app/javascripts/packs/index.jsx
import React, {Component} from 'react';
import ReactDOM from 'react-dom'
ReactDOM.render(<div>hello world</div>, document.getElementById("root"));
webpack-dev-server 负责监控和打包我们的js文件，rails s启动服务器。
6、webpack提供的替代Sprockets 的方法：
stylesheet_pack_tag => stylesheet_tag
javascript_pack_tag => javascript_tag
asset_pack_path => asset_path
image_pack_tag => image_tag
asset_pack_url => asset_url
