citysheep (Rui)

[厦门] T 社招聘初级开发工程师

citysheep — Fri, 23 Sep 2016 15:19:05 +0800

关于 T 社

从刚开始作为工人、水手的工作服，T 恤因其舒适、透气、吸汗而受到人们欢迎。一部《欲望号街车》，让 T 恤走进了公众视野，随后逐渐风靡全球。

T 社是一个创想至上的 T 恤定制与预售平台，让热爱 T 恤的 T 迷们用自己的表达方式涂绘在 T 恤上面，做自己所爱，把喜欢穿在身上，把喜欢分享出去。T 社平台从生产、配送及管理，帮助发起者实现无库存销售，让 T 恤定制变得更简单！

目前公司近 50 人，包括 3 位创始人：

CEO，拥有丰富的人生阅历，辗转四国求学，适应力极强，吹过太平洋的风，踏过下雪的美国，混过大名鼎鼎的剑桥。归国后曾任顶级 VC 投资人，观察敏锐，经验老道，积累丰厚的互联网资源后，开始自己动手丰衣足食的创业生涯。心地善良的暖男 CEO，主要给 T 社的小伙伴们做除了技术以外的任何活儿。
CTO，前 IDG 自由人（青年驻场企业家），大学拿遍各种奖学金并环游世界，折腾 Facebook App 做到百万用户，热爱从零到一创造价值的感觉。毕业后加入外资投行开发顶级算法交易，业余时间不忘搭建各种产品，坚信技术改变世界。
CSCO（供应链合伙人），国际贸易科班毕业，传统行业游侠，项目遍及服装、矿产、农产品、食品原材料及加工等，并对进出口和贸易、金融多有涉足。家族 20 年经营服饰面料，与几十家国内外品牌合作密切，品牌供应商资源硬朗。

初级开发工程师

要求

熟悉 Ruby 或者 Nodejs，有良好的编程功底（有 Java / Python / PHP 经验，对 Ruby / Nodejs 感兴趣亦可以）
熟练使用关系型数据库，如 MySQL、Postgresql 等
了解和使用过自动化测试
熟悉 Linux / Unix 命令行
有极客精神，热爱编程，对自己的代码有追求
看英文文档学新技术无压力
熟悉 git 的操作

加分

在线作品、博客，或开源项目开发经验

公司福利

有竞争力的薪资（应届生 4~5K，具体看实际经验和能力）
13 薪，培训福利，浮动年终奖
早期员工，不错的期权激励
午餐、晚餐补贴
完善的薪酬体系，每年的薪资晋级和职位提升机会
良好的工作环境，免费零食饮料，更有下午茶、T 社欢乐趴等活动
满一年享受 5 天年假，年假假期将逐年增加
弹性上班时间，09:00 – 10:00 为上班时间，下班时间为 18:00 – 19:00
生日红包、大乐透及生日蛋糕让你的生日不再寂寞
不定期组织员工旅游、户外休闲等活动，外出旅行、真人 CS、别墅派对等

技术栈

T 社技术团队均来自国内外顶尖学府及互联网公司，我们玩技术、爱技术、不妥协。

后端：Nodejs/Ruby On Rails + Docker
前端：React + Redux, Vue，Nodejs, Webpack
移动：React Native
Code Review、持续集成、持续部署和自动化测试，Github + Jenkins CI + Slack + Lint
队内技术分享，定期的大牛分享
喜欢技术挑战

新闻报道

T 社是技术圈的好伙伴。Vue.js、Strikingly、稀土掘金、SegmentFault 等都是我们的合作伙伴。今年 T 社更是中国 RubyConf、JSConf 独家 T 恤提供方。

公司官网： https://www.tshe.com
品牌视频： http://v.qq.com/boke/page/z/0/3/z0175jum2d3.html
36kr 报道： http://36kr.com/p/5040894.html?ref=head_line_top
铅笔道报道： http://qianbidao.baijia.baidu.com/article/260835
小饭桌报道： http://it.sohu.com/20160106/n433637711.shtml
创业邦报道： http://www.cyzone.cn/a/20160121/289004.html
T-Show ： https://www.tshe.com/stories

联系我们

如果你对 T 社感兴趣，欢迎发送简历到 hi@tshe.com。

[厦门] T 社招聘实习开发工程师

citysheep — Sun, 17 Apr 2016 12:50:04 +0800

T 社是一个 T 恤定制、众筹的互联网初创公司，已获得 IDG 资本和 FreeS 峰瑞资本的天使轮投资。目前需要招聘实习开发工程师。这是我们的网站： https://www.tshe.com

目前公司近 50 人，包括 3 位创始人：

CEO - 拥有丰富的人生阅历，辗转四国求学，适应力极强，吹过太平洋的风，踏过下雪的美国，混过大名鼎鼎的剑桥。归国后曾任顶级 VC 投资人，观察敏锐，经验老道，积累丰厚的互联网资源后，开始自己动手丰衣足食的创业生涯。心地善良的暖男 CEO，主要给 T 社的小伙伴们做除了技术以外的任何活儿。
CTO - 前 IDG 自由人（青年驻场企业家），大学拿遍了奖学金并环游世界，折腾 Facebook App 做到百万用户，热爱从零到一创造价值的感觉。毕业后加入外资投行开发顶级算法交易，业余时间不忘搭建各种产品，坚信技术改变世界。
供应链合伙人 - 国际贸易科班毕业，传统行业游侠，项目遍及服装、矿产、农产品、食品原材料及加工等，并对进出口和贸易、金融多有涉足。家族 20 年经营服饰面料，与几十家国内外品牌合作密切，品牌供应商资源硬朗。

团队福利

厦门本地有竞争力的薪酬水平（实习 2~3k）
队内技术分享，定期的大牛分享（覃超是我们的技术顾问：https://www.zhihu.com/people/qin.chao）
免费午饭和晚饭
无限量的零食和饮料

技术栈

T 社技术团队均来自国内外顶尖学府及互联网公司，我们玩技术、爱技术、不妥协。

后端：Rails/Node + Docker
前端：Webpack, React + Redux, Vue
移动：React Native
Code Review、持续集成、持续部署和自动化测试（Github + Jenkins CI + Slack）
喜欢技术挑战

如果你感兴趣，欢迎发送简历到 hi@tshe.com，请注明简历来自 RubyChina。

新闻报道

T 社是技术圈的好伙伴。Vue.js、Strikingly、稀土掘金、SegmentFault 等都是我们的合作伙伴。

公司官网： https://www.tshe.com
酷炫视频： http://v.qq.com/boke/page/z/0/3/z0175jum2d3.html
36kr 报道： http://36kr.com/p/5040894.html?ref=head_line_top
铅笔道报道： http://qianbidao.baijia.baidu.com/article/260835
小饭桌报道： http://it.sohu.com/20160106/n433637711.shtml
创业邦报道：http://www.cyzone.cn/a/20160121/289004.html
T-Show：https://www.tshe.com/stories

附我司技术小哥之日常

开开生日 party

结对写写代码

踢踢桌上足球

和设计师相爱想杀

Rails 配置 �Webpack 终极篇

citysheep — Fri, 08 Apr 2016 13:20:13 +0800

之前写过一篇 webpack 初步 https://ruby-china.org/topics/27537，后来随着深入使用做了一些修改和优化。这篇文章将更详细地介绍如何从 Rails Asset Pipeline 迁移到 webpack（包括 javascript、stylesheets 以及其他资源文件），并且在生产环境使用。

为什么不继续使用 Asset Pipeline

Rails Asset Pipeline 是个很不错的解决方案，如果前端代码不复杂的话还是非常推荐的。然而如果一个项目有如下的特征，建议还是使用 npm 来管理前端的 package，并用 webpack 或者其他工具来做前端工程化：

使用了最新的一些前端 package，找不到对应的 gem，需要人工添加到 vendor。
前端有复杂的结构和交互，需要更清晰地管理不同组件的倚赖。

STEP 1：安装 npm 和 webpack

使用 nvm 安装 npm（和咱 Ruby 的 rvm 基本一样）
在 Rails 项目的目录下运行 npm init，按提示操作，会自动创建一个 package.json 文件
接着通过 npm 安装我们需要的 package，比如 webpack：

// 安装 webpack
npm install webpack --save-dev 

// webpack 命令行
npm install -g webpack

######注意：

npm install XXX --save-dev 和 npm install XXX -save 会自动把要安装的 package 添加到 package.json 文件里的 dependencies 和 devDependencies 部分。
npm 国内可能比较慢，建议使用 cnpm：http://npm.taobao.org/

最终你的 package.json 文件差不多长这样，有一些 package 我们之后会提到。

{
  "name": "my app",
  "description": "my rails app using webpack",
  "version": "1.0.0",
  "dependencies": {
    "jquery": "^2.1.4",
    "jquery-ujs": "~1.1.0-1",
    "lodash": "~3.0.0",
  },
  "devDependencies": {
    "babel-core": "^5.8.25",
    "babel-loader": "^5.3.2",
    "babel-runtime": "^6.5.0",
    "coffee-loader": "^0.7.2",
    "coffee-script": "^1.10.0",
    "css-loader": "^0.23.0",
    "exports-loader": "~0.6.2",
    "expose-loader": "~0.6.0",
    "extract-text-webpack-plugin": "^0.9.1",
    "file-loader": "^0.8.5",
    "imports-loader": "~0.6.3",
    "node-sass": "^3.4.2",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.14",
    "webpack-manifest-plugin": "^1.0.0"
  }
}

STEP 2：搬迁前端代码

代码结构

现在我们考虑把前端的 javascript、stylesheets、images 都抽出来，在原项目目录下创建一个新文件夹 frontend，项目文件夹结构如下：

/app
   /assets
   /controllers
   /models
   /...
/config
   /...    
/frontend
   /fonts
   /images
   /stylesheets
   /javascripts
   /development.config.js
   /production.config.js

现在我们添加一些 javascript、stylesheet 和 image：

/frontend
   /fonts
   /images
       /banner.jpg
   /stylesheets
       /home.scss
   /javascripts
       /home.coffee
       /app.js
   /development.config.js
   /production.config.js

配置 webpack

webpack 的配置文件一如既往的复杂，development.config.js 是开发环境的配置，加了一些注释，就不赘述了：

var path = require('path');
var _ = require('lodash');
var webpack = require('webpack');
var assetPath = path.join(__dirname, '../', 'public', 'assets');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var ManifestPlugin = require('webpack-manifest-plugin');

var config = module.exports = {
  context: path.join(__dirname, '../'),

  // 告诉 webpack 去哪里找 entry 文件
  // webpack 按需加载和打包里面使用的 module，这里用 CommonJS/AMD/ES6 的语法都可以
  entry: './frontend/javascripts/app.js',

  // 开发环境 debug 的一些配置
  debug: true,
  displayErrorDetails: true,
  outputPathinfo: true,
  devtool: 'cheap-module-eval-source-map'
};

config.output = {
  path: assetPath,

  // 打包出来的文件会是 [文件名]_bundle.js
  // 比如我们的 entry 叫 app.js，打包出来的文件就是 app_bundle.js
  filename: '[name]_bundle.js',
  publicPath: '/assets/'
};

config.resolve = {
  extensions: ['', '.js', '.coffee', '.json'],
  modulesDirectories: ['node_modules'],
  root: path.resolve(__dirname),
};

config.plugins = [
  // 如果多个文件里使用了 jquery，以下这个 plugin 可以让你不用每次都 require('jquery')
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  }),

  // 用来抽取 js 文件里引用的 css 文件，最终的文件名也会是 [js文件名]_bundle.css 的形式
  new ExtractTextPlugin('[name]_bundle.css', {
    allChunks: true
  })
];

// webpack 强大的 loader
config.module = {
  loaders: [
    // 下面两行将 jquery 暴露到外面的 $ 和 jQuery 里，这样 webpack 以外的 js 也可以顺利使用 jquery
    {test: require.resolve("jquery"), loader: "expose?jQuery" },
    {test: require.resolve("jquery"), loader: "expose?$" },

    // 使用 babel-loader 来支持 es6 语法
    {test: /\.js$/, loader: 'babel-loader'},

    // 使用 coffee-loader 来编译 CoffeeScript
    {test: /\.coffee$/, loader: 'coffee-loader'},

    // 使用 url-loader 来编译字体文件和图片，如果文件小于8kb就直接变成 DataUrl
    {test: /\.(woff|woff2|eot|ttf|otf)\??.*$/, loader: 'url-loader?limit=8192&name=[name].[ext]'},
    {test: /\.(jpe?g|png|gif|svg)\??.*$/, loader: 'url-loader?limit=8192&name=[name].[ext]'},

    // 使用 style-loader、css-loader 来打包 css，sass-loader 打包 sass
    // 使用 ExtractTextPLugin 生成独立的 css 文件
    {test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader')},
    {test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css!sass')}
  ]
};

这样就可以在 js 里引用其他 js/coffee、css/sass 啦，例如我们的 app.js 里可以这样写：

// 引用 home.scss
require('../stylesheets/home.scss');

// 引用 home.coffee
require('./home');

也可以在 css/sass 里引用 image 了，注意使用 url 方法（类似 Rails 里的 asset-url）。例如我们的 home.scss：

.home-banner {
    background-image: url('../images/banner.jpg');
}

生产环境

生产环境的话需要做一些调整：

打包出来的资源名称加 hash（类似 Rails 里的 fingerprint）
使用 CDN

config.output = {
  ...
  // 给 js 加 fingerprint
  filename: '[name]_bundle-[chunkhash].js',

  // 假设我们的 cdn 是 http://cdn.test.com
  publicPath: 'http://cdn7.test.com/assets/',
  ...
});

config.plugins = [
    ...
    // 给抽出来的 css 加 fingerprint
    new ExtractTextPlugin('[name]_bundle-[chunkhash].css', {
      allChunks: true
    }),

    // 这个 pulgin 我们下一步介绍
    new ManifestPlugin({
      fileName: 'webpack_manifest.json'
    }),

    // 一些生产环境优化用的 plugin
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    ...
];

config.module = {
  loaders: [
     ...
     // 给 image、font 等资源加 fingerprint
    {test: /\.(woff|woff2|eot|ttf|otf)\??.*$/, loader: 'url-loader?limit=8192&name=[name]-[hash].[ext]'},
    {test: /\.(jpe?g|png|gif|svg)\??.*$/, loader: 'url-loader?limit=8192&name=[name]-[hash].[ext]'},
     ...
  ];
};

运行 webpack

开发环境运行下面的命令，webpack 会根据配置文件打包资源。按之前的例子，就会在 assets/public 里打包出 app_bundle.js app_bundle.css banner.jpg 并随时更新：

webpack --config frontend/development.config.js --display-reasons --display-chunks --progress --color

生产环境使用以下命令：

webpack --config frontend/production.config.js -p

STEP3：Rails 后端

webpack 打包完成后，在 Rails 里如何引用打包生成的资源呢？在开发环境可以直接使用文件名引入：

<%= javascript_include_tag 'app_bundle' %>
<%= stylesheet_link_tag 'app_bundle' %>

但是生产环境打包出来资源的名称加了 fingerprint，导致 Rails 找不到资源。这时候我们使用 webpack 的 ManifestPlugin，它会在打包的时候生成一个 json 文件，里面有原文件和生成文件的对应关系。例如：

{
  "banner.jpg": "banner-51aad7eb9e12db5cd6b1fd8688aadc8a.jpg",
  "app.css": "app_bundle-d5c3643adae965258b70.css",
  "app.js": "app_bundle-d5c3643adae965258b70.js",
}

在 webpack 里配置如下：

new ManifestPlugin({
  fileName: 'webpack_manifest.json'
})

这样在 Rails 里我们可以依据这个 json 文件来写一些 helper，让 Rails 找到 webpack 打包出来的资源：

// config/application.rb 里添加配置
config.webpack = {
  asset_manifest: {}
}

// 加一个 config/initializers/webpack 来加载这个配置
asset_manifest = Rails.root.join('public', 'assets', 'webpack_manifest.json')
if File.exist?(asset_manifest)
  Rails.configuration.webpack[:manifest] = JSON.parse(
    File.read(asset_manifest),
  ).with_indifferent_access
end

在 application_helper.rb 里添加加载 webpack 资源的 helper 方法：

// cdn_assets_url 是我们自定义的一个方法
// 如果是生产环境会返回该资源在我们自己 cdn 的 url
// 如果是开发环境直接返回本地的 url

def webpack_javascript_include_tag(name)
  full_name = "#{name}_bundle.js"
  src = cnd_assets_url("/assets/#{full_name}")
  if Rails.configuration.webpack[:manifest]
    asset_name = Rails.configuration.webpack[:manifest]["#{name}.js"]
    if asset_name
      src = cnd_assets_url("/assets/#{asset_name}")
    end
  end
  "<script src=\"#{src}\"></script>".html_safe
end

def webpack_stylesheet_link_tag(name)
  full_name = "#{name}_bundle.css"
  src = cnd_assets_url("/assets/#{full_name}")
  if Rails.configuration.webpack[:manifest]
    asset_name = Rails.configuration.webpack[:manifest]["#{name}.css"]
    if asset_name
      src = cnd_assets_url("/assets/#{asset_name}")
    end
  end
  "<link rel=\"stylesheet\" href=\"#{src}\">".html_safe
end

这样我们只需要用以上两个方法在 Rails 的 view 层引用资源就可以了。比如我们之前的例子里的 app_bundle.js 和 app_bundle.css：

<%= webpack_javascript_include_tag 'app' %>
<%= webpack_stylesheet_link_tag 'app' %>

其他功能

Hot Module Replacement

如果使用了 React，可以在开发环境配合 webpack 实现热替换（HMR）。需要先安装一个 webpack-dev-server，它会默认运行在 8080 端口，然后实时根据代码改动打包更新 webpack 资源，并在浏览器更新 React 组件，而不需要刷新页面。

这么强大的功能如何使用？我们先在 webpack 配置里修改 publicPath：

config.output = {
  ...   
  publicPath: 'http://localhost:8080/assets/',
  ...
});

添加 react-hot-loader 来编译 js：

{test: /\.js$/, loaders: ['react-hot', 'babel-loader']},

使用以下命令打包：

webpack-dev-server --config frontend/development.config.js --hot --inline

在 Rails 里将我们之前写的两个 helper 方法再进一步改进就可以了：

def webpack_javascript_include_tag(name)
  full_name = "#{name}_bundle.js"
  src = cnd_assets_url("/assets/#{full_name}")
  if Rails.env.development?
    # 热替换
    src = "http://localhost:8080/assets/#{full_name}"
  elsif Rails.configuration.webpack[:manifest]
    asset_name = Rails.configuration.webpack[:manifest]["#{name}.js"]
    if asset_name
      src = cnd_assets_url("/assets/#{asset_name}")
    end
  end
  "<script src=\"#{src}\"></script>".html_safe
end

def webpack_stylesheet_link_tag(name)
  full_name = "#{name}_bundle.css"
  src = cnd_assets_url("/assets/#{full_name}")
  if Rails.env.development?
    # 热替换
    src = "http://localhost:8080/assets/#{full_name}"
  elsif Rails.configuration.webpack[:manifest]
    asset_name = Rails.configuration.webpack[:manifest]["#{name}.css"]
    if asset_name
      src = cnd_assets_url("/assets/#{asset_name}")
    end
  end
  "<link rel=\"stylesheet\" href=\"#{src}\">".html_safe
end

webpack 性能调优

webpack 性能优化可以参考这篇文章 https://github.com/wyvernnot/webpack_performance/tree/master/moment-example。可通过添加别名、使用 cdn 来优化性能，这里就不一一列举了。建议先用 webpack 自带的 profile 方法分析出哪里是瓶颈后再调优。

后记

Rails 完成了 webpack 的配置之后，前端完全融入了现在的前端生态，之后可以玩的就多了。比如最近我们在用 React + Redux 重构 T 社的编辑器（http://tshe.com/campaigns/new）就非常方便 :)

[厦门] T 社招聘 Ruby 工程师等职位啦

citysheep — Sat, 23 Jan 2016 00:00:53 +0800

T 社是一个 T 恤定制、众筹的互联网初创公司，已获得 IDG 资本和 FreeS 峰瑞资本的天使轮投资。目前在厦门扩张团队，需要招聘 Ruby/Nodejs 全栈工程师、web 前端工程师、移动开发工程师。作为早期团队成员，除了诱人的薪资、福利和感受从零到一打造产品的快感外，还将获得丰厚的期权奖励。这是我们的网站： http://tshe.com

目前团队全职的有 31 人，包括 3 位创始人：

CEO - 前 IDG 投资人，美国 UIUC 本科，英国剑桥硕士，拥有丰富的投资圈背景和投融资经验，认识国内很多著名投资人和创业团队。
CTO - 香港中文大学全额奖学金获得者，开发过百万用户的 Facebook App，外资投行顶级交易系统开发主力，前 IDG 自由人。
供应链合伙人 - 在福建的家族服装企业，拥有强大的供应链优势，和许多国内知名品牌有合作关系。

团队福利

有竞争力的薪酬水平（5~10k）
早期员工，期权激励
队内技术分享，定期的大牛分享
免费午饭和晚饭
无限量的零食和饮料
五险一金

我们对技术有着执着的追求：

后端：Rails/Node + Docker
前端：Webpack, React + Redux, Vue
移动：React Native
Code Review、持续集成、持续部署和自动化测试
喜欢技术挑战

如果你感兴趣，欢迎发送简历到 hi@tshe.com。也欢迎推荐靠谱的朋友，如推荐成功，我们将送上 Apple Watch。也欢迎来我们平台定制 T 恤、卫衣 :)

新闻报道

公司官网： http://tshe.me
酷炫视频： http://v.qq.com/boke/page/z/0/3/z0175jum2d3.html
36kr 报道： http://36kr.com/p/5040894.html?ref=head_line_top
铅笔道报道： http://qianbidao.baijia.baidu.com/article/260835
小饭桌报道： http://it.sohu.com/20160106/n433637711.shtml
创业邦报道：http://www.cyzone.cn/a/20160121/289004.html

附我司技术小哥之日常

开开生日 party

结对写写代码

踢踢桌上足球

和设计师相爱想杀

[厦门] 获得 IDG 和 FreeS 投资的初创团队招聘 Ruby 全栈工程师

citysheep — Wed, 14 Oct 2015 23:46:44 +0800

T 社是一个 T 恤定制、众筹的互联网初创公司，已获得 IDG 资本和 FreeS 峰瑞资本的天使轮投资。目前在厦门扩张团队，需要招聘 Ruby/Nodejs 全栈工程师、web 前端工程师。作为早期团队成员，除了诱人的薪资、福利和感受从零到一打造产品的快感外，还将获得丰厚的期权奖励。这是我们的网站： http://tshe.com

目前团队全职的有 31 人，包括 3 位创始人： CEO - 前 IDG 投资人，美国 UIUC 本科，英国剑桥硕士，拥有丰富的投资圈背景和投融资经验，认识国内很多著名投资人和创业团队。 CTO - 香港中文大学全额奖学金获得者，开发过百万用户的 Facebook App，外资投行顶级交易系统开发主力，前 IDG 自由人。供应链合伙人 - 在福建的家族服装企业，拥有强大的供应链优势，和许多国内知名品牌有合作关系。

团队福利有竞争力的薪酬水平早期员工，期权激励队内技术分享，强大的顾问团队：http://tshe.com/about_us 免费午饭和晚饭无限量的零食和饮料五险一金

我们对技术有着执着的追求：

后端：Rails/Nodejs
前端：webpack + React + Redux
移动：React Native
Code Review、持续集成、持续部署和自动化测试
喜欢技术挑战

如果你感兴趣，欢迎发送简历到 hi@tshe.com。也欢迎推荐靠谱的朋友，如推荐成功，我们将送上 Apple Watch。也欢迎来我们平台定制 T 恤、卫衣 :)

新闻报道

公司官网： http://tshe.com
酷炫视频： http://v.qq.com/boke/page/z/0/3/z0175jum2d3.html
36kr 报道： http://36kr.com/p/5040894.html?ref=head_line_top
铅笔道报道： http://qianbidao.baijia.baidu.com/article/260835
小饭桌报道： http://it.sohu.com/20160106/n433637711.shtml
创业邦报道：http://www.cyzone.cn/a/20160121/289004.html

Rails 配置 webpack

citysheep — Fri, 02 Oct 2015 00:31:08 +0800

趁着国庆假期，在项目的前端搭上了 webpack，以便更好地模块化管理前端代码。这里和大家分享一下，期待更多交流。（参考了这篇业界良心的 tutorial：http://clarkdave.net/2015/01/how-to-use-webpack-with-rails）

基本配置

安装 webpack

在项目的目录下创建 package.json 来管理需要的外部 module：

{
  "name": "app",
  "description": "the app",
  "version": "1.0.0",
  "dependencies": {
    "coffee-loader": "^0.7.2",
    "coffee-script": "^1.10.0",
    "exports-loader": "~0.6.2",
    "expose-loader": "~0.6.0",
    "imports-loader": "~0.6.3",
    "css-loader": "~0.6.3",
    "underscore": "~1.8.3",
    "webpack": "~1.4.13",
    "jquery": "~2.1.4"
  }
}

安装需要的 module（墙内可以使用淘宝镜像 https://npm.taobao.org/ ）

npm install

安装 webpack

npm install -g webpack

配置 webpack

由于 webpack 本身功能的强大，配置文件也可以很复杂，这里简单配置一下，添加一个叫 webpack.config.js 的文件

var path = require('path');
var webpack = require('webpack');

var config = module.exports = {
  context: __dirname,
  // 告诉 webpack 去哪里找 entry 文件
  // entry 文件最终会被 compile 出来
  // 我们将新的 js 代码都统一放在 app/frontend/javascritps 文件夹下面 
  entry: './app/frontend/javascripts/entry.js'
};

config.output = {
  // 告诉 webpack 根据 entry 文件编译出来的文件叫 bundle.js
  // 并把文件生成到 app/assets/javascripts 目录下，这样 Rails 的 Asset Pipeline 便可以直接使用
  path: path.join(__dirname, 'app', 'assets', 'javascripts'),
  filename: 'bundle.js',
  publicPath: '/assets'
};

config.resolve = {
  // 告诉 webpack 可引用文件的后缀
  // 比如我们添加了 '.js'，所以可以用 require('app') 来代替 require('app.js')
  extensions: ['', '.js', '.coffee']
};

config.module = {
  loaders: [
    // 用来 load CoffeeScript
    { test: /\.coffee$/, loader: 'coffee-loader' },
  ],
};

entry.js 可以是任何 js 文件，里面可以通过 require 来引用其他的 module，举个例子：

_ = require('underscore')
console.log(_.keys({"foo": "bar"}))

运行 webpack

运行以下命令，webpack 会根据上一步的配置文件生成一个 bundle.js

webpack -d --display-reasons --display-chunks --progress

之后只需要在 view 里引用生成的 js 文件（bundle.js）

<%= javascript_include_tag 'bundle'  %>

配置 bower

因为有些 module 只有 bower 有，所以我们可以在使用 npm 的同时也使用 bower 安装 bower

npm install -g bower

添加 bower.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "the app",
  "dependencies": {
    "jquery": "~1.11.0"
  }
}

在 webpack 配置里添加 bower_components

config.resolve = {
  ...
  modulesDirectories: [ 'node_modules', 'bower_components' ],
  ...
};

再添加一个 plugin（这里感叹一下 webpack 的 plugin 相当之丰富）

config.plugins = [
  // 告诉 webpack 除了 package.json，还可以去哪里寻找 module 的描述
  new webpack.ResolverPlugin([
    new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('bower.json', ['main'])
  ])
];

配置好之后就可以同时使用 npm 和 bower 的 package 啦

bower install

多个 entry 文件

以上的配置都只是一个 entry 文件（entry.js），有时候需要多个 entry 文件来更好分离不同页面的 js，那么可以使用以下配置：

var config = module.exports = {
  ...
  entry: {
    entry1: './app/frontend/javascripts/entry1.js',
    entry2: './app/frontend/javascripts/entry2.js
  }
  ...
};

config.output = {
  ...
  // 生成的文件直接使用 entry 的名称来命名
  filename: '[name]_bundle.js',
  ...
};

之后我们在 view 里需要的地方便可使用 entry1_bundle.js 和 entry2_bundle.js

开发环境设置

开发环境里可以使用以下的命令让 webpack 保持自动编译前端代码：

webpack --watch --colors

当然也可以使用 foreman 统一设置，比如我们项目的 Procfile：

sidekiq: bundle exec sidekiq
web: rails server
webpack: webpack --watch --colors

教程里还提到了一些高级的配置，感兴趣的同学可以试试

配置全局 module，比如配置 jQuery 之后，不需要在每个文件都 $ = require('jquery')。
自动提取共享 module，使用 webpack.optimize.CommonsChunkPlugin 来自动抽取不同 entry 文件里面共用的 module，生成一个新文件。
生产环境可以给生成的 js 文件添加类似 Rails 的 fingerprint。

待解决问题

生产环境下 Rails 会给图片添加 fingerpint，所以之前有些 js 文件添加了 .erb 后缀通过服务器渲染来使用 asset_path 调用图片。webpack 对于此类 js 似乎没有一个优雅的解决方案。目前我的做法是将这些 js 继续保留在了 Asset Pipeline 里。
webpack 是支持打包 css 和 image 的，还在研究如何将 Rails 里的 CSS/SASS 也使用 webpack 打包。

后记

团队目前有两名 Rubyist，本来是想等招到前端再来好好做一下模块化，但苦于厦门靠谱前端难寻，趁着国庆假期终于下决心自己撸。个人感觉 webpack 这货非常之强大，CommomJS、AMD、ES6 语法任君选择，但配置相对复杂些。这里特别感谢老同学 Strikingly CTO 郭达峰@dfguo 的推荐，也很期待下周 RubyConf 上 Strikingly 团队关于 webpack 的分享。

[厦门] 绝对靠谱的初创公司招 Ruby 工程师 (5~10k + 期权激励)

citysheep — Wed, 15 Jul 2015 23:02:17 +0800

我们是 T 社，一个 T 恤众筹的平台。团队在北京融资顺利，开始在厦门组建早期开发团队。需要招聘全栈 Rubyist、Web 前端和 UI 设计师。如果你想拿着一线城市的工资，在一个非常宜居的地方享受创业，打造一款出色的产品，并收获丰厚回报，T 社绝对是一个不错的选择。

在 T 社，发起人可以在线设计 T 恤、发起众筹，低成本地向粉丝推广自己的品牌。支持者们可以参与众筹，用实际行动支持自己心仪的团体或个人。我们的口号是：把喜欢穿在身上。T 社的 beta 版本：http://tshe.me。

我们创始团队三人，都是 85 后。创始人是剑桥海归、顶级 VC 的投资人出来创业，人脉很广（所以我们融资很顺利，也和很多互联网公司关系紧密）。另一位合伙人在福建的家族企业，和国内许多知名服装品牌有很好的合作关系（所以我们线下供应链资源优势明显）。我本人是技术合伙人，大学时候做过百万用户的 Facebook App，之前在香港的瑞士信贷开发算法交易系统，在 IDG 做过自由人，还创立过留学网站 GradChef 毕老师（所以我们懂技术，也很了解互联网）。

全栈 Rubyist

熟悉 Ruby On Rails，有一定的实战经验（有 Python 或者 Node.js 经验也可以考虑）
熟悉前端开发，了解一种或以上 JavaScript 框架
http://tshe.me/jobs/rubyist

Web 前端工程师

熟练掌握 HTML、CSS、JavaScript，包括 HTML5 和 CSS3
熟悉一种或以上 JavaScript 框架
具有移动端网页开发的相关经验，熟悉 Responsive Web Design
http://tshe.me/jobs/frontend

UI 设计师

曾经参与和主导过大型网站项目设计
熟练掌握做图工具，如 Photoshop、Adobe Illustrator
具有移动端网页设计的相关经验，熟悉 Responsive Web Design
http://tshe.me/jobs/design

福利

有竞争力的薪酬
期权激励
作为早期员工，参与制定公司福利、招人、打造团队文化，T 社的未来会因你不同！

报名方法

如果对 T 社感兴趣，或者想了解更多，欢迎发送邮件至：hi@tshe.me。欢迎附上你的简历或者相关作品（做过的项目，github，dribble 等）

我们非常期待与你在 T 社相聚！

各地 Rubyist 圈子如何？

citysheep — Tue, 23 Jun 2015 18:14:49 +0800

之前听说深圳、上海的 Ruby 社区要好过北京，不知道是不是这样呢？其他地方比如广州、厦门的 Ruby 社区如何？