由一系列heirloom子项目/插件构成的模板工程。

要求使用者需要具备一些基本的react以及redux框架的知识。

整套脚手架遵循规约重于配置的策略,最大程度简化前端杂七杂八的框架或工具的学习成本,开发者只需要专注于编写业务逻辑和单元测试。

规约大多借鉴自现有的一些标准或知识体系。

相关项目

  1. heirloom-core
  2. heirloom-api-plugin
  3. heirloom-static-plugin

快速开始

全局安装yeoman(如果已安装,请跳过该步骤):

npm -g install yo

安装generator-heirloom:

npm -g install generator-heirloom

新建工程(或者将example替换为你的项目名称):

yo heirloom example

等待一切安装结束后:

cd example

创建并编辑api/__mocks__/sample.js文件:

// GET请求
exports.get = function (ctx) {
    ctx.body = 'staging';
};

创建并编辑api/sample.js文件:

// GET请求
exports.get = function (ctx) {
    ctx.body = 'production';
};

创建并编辑public/sample/index.js文件:

import 'babel-polyfill';
import 'isomorphic-fetch';

const p = document.createElement('p');
document.body.appendChild(p);

(async function () {
    const response = await fetch('/api/sample');
    if (response.ok) {
        p.innerText = await response.text();
        p.style.color = 'green';
    } else {
        p.innerText = '请求失败!';
        p.style.color = 'red';
    }
})();

创建并编辑public/sample/package.json文件:

{
  "name": "sample"
}

example项目根目录下,命令行终端执行:

yarn dev

浏览器访问:

open http://localhost:3000/sample // staging

结束之前执行yarn dev所启动的进程,后执行:

yarn start

浏览器访问:

open http://localhost:3000/sample // production

了解更多