❤
npm
Sign UpSign In

generator-peon-static

0.0.40 • Public • Published

generator-peon-static

NPM version

这是一个基于yeoman的前端peon工程脚手架生成器

Update

新增vue脚手架 新增react+redux4app 适用于h5项目

2016-09-14 修复redux index.jsx文件多个export报错的问题

简介

本generator根据不同业务需求，提供了如下4种脚手架类型可供开发者选择

basic

最简单的脚手架，未集成任何lib和tool chain,只提供了最基本的html/js/css示例文件

webpack+cortex+es6+less

集成了webpack+cortex+babel+es6+less+postcss，支持Hot Module Replacement (HMR) ，自带图片压缩，适合习惯使用传统前端技术栈(jquery/zepto+less)的开发者解决一般复杂度需求，比如各种活动页

webpack+cortex+es6+react+less

在楼上webpack+cortex+es6+less脚手架的基础上增加了对react/css module的支持，自带图片压缩，对于熟悉react的开发者，建议使用该脚手架来创建项目，但这并不是说所有项目都应该用react，对于逻辑交互比较复杂的需求，使用react有助于降低开发复杂度，一般的偏展示性页面还是建议使用楼上的webpack+cortex+es6+less脚手架

webpack+cortex+es6+react+redux4app

在前面react脚手架的基础上增加了对react+redux的支持，对于开发复杂应用,为了方便管理数据流,各组件共享数据,简化操作逻辑

webpack+cortex+es6+vue

基于vue的官方webpack脚手架，集成了cortex。轻量级的数据驱动型Web界面组件。

安装

首先安装yeoman(如果已安装请忽略此步)
npm install -g yo

yeoman是一种脚手架生成工具，方便你快速使用/开发脚手架生成器(generator),类似于npm init或者cortex init，开发者只用输入一些简单的信息，yeoman的generator就能帮你快速生成相应的工程脚手架，开发者无需花过多精力去搭建开发环境

安装generator-peon-static
npm install -g generator-peon-static

初始化项目

cd /path/of/your/project
yo peon-static

根据需要选择不同类型的模板

? boilerplate (Use arrow keys)
❯ basic 
  webpack+cortex+es6+less 
  webpack+cortex+es6+react+less 
  webpack+cortex+es6+react+redux4app
  webpack+cortex+es6+vue 

按提示填写所有project信息后，工具会自动帮我们进行npm install,cortex install等命令，我们只需要耐心等待所有依赖包安装完毕。

构建

basic

暂不支持，请自行配置

webpack+cortex+es6+less

cd /path/of/your/project
 
//手动构建
webpack
 
//自动构建
webpack --watch

webpack+cortex+es6+react+less

cd /path/of/your/project
 
//手动构建
webpack
 
//自动构建
webpack --watch

webpack+cortex+es6+react+redux4app

cd /path/of/your/project
 
//手动构建
webpack
 
//自动构建
webpack --watch

webpack+cortex+es6+vue

cd /path/of/your/project
 
//手动构建
webpack
 
//自动构建
webpack --watch

运行调试

通过webpack-dev-server开启本地web server服务器，支持自动构建，支持热部署Hot Module Replacement (HMR)，即每次修改完代码webpack-dev-server会自动build并让浏览器自动载入被修改过的模块，开发者无需手动刷新浏览器。

basic

暂不支持，请自行配置

webpack+cortex+es6+less

npm start

项目初始化完毕后会自动运行上面的命令开启调试模式

webpack+cortex+es6+react+less

npm start

项目初始化完毕后会自动运行上面的命令开启调试模式

webpack+cortex+es6+react+redux4app

npm start

项目初始化完毕后会自动运行上面的命令开启调试模式

webpack+cortex+es6+vue

npm run start

项目初始化完毕后会自动运行上面的命令开启调试模式

发布

不用本地构建，直接发布

  1. git commit and push

  2. CI发布(beta/peon_static)

说明和配置

basic

待工程初始化完毕后可以看到工程目录如下

.
├── LICENSE
├── README.md
├── f2eci.json
├── gulpfile.js
├── node_modules
│   ├── ...
├── html
│   ├── static
│   │   ├── test.css
│   │   └── test.js
│   └── test.html
├── index.js
└── package.json

  • 所有要发布的html文件都在./html目录下，./html/test.html是最简单的示例页面

  • webpack执行的时候会执行gulp命令，将./html目录下的所有文件复制到./dist目录下，CI会将./dist目录下的所有文件发布到CDN上

  • ./f2eci.json为peon的配置文件，具体参考这里

webpack+cortex+es6+less

待工程初始化完毕后可以看到工程目录如下

.
├── LICENSE
├── README.md
├── cortex.json
├── f2eci.json
├── gulpfile.js
├── html
│   ├── static
│   │   └── i
│   │       └── icon-right.png
│   └── test.html   //示例html页面
├── index.js
├── package.json
├── server.js   //webpack-dev-server启动配置文件
├── src
│   ├── lib
│   │   └── hello.es6
│   └── pages
│       └── test
│           ├── assets  //静态资源
│           │   ├── i   //图片
│           │   │   ├── icon-wrong.png
│           │   │   └── upload.png
│           │   └── styles  //样式
│           │       └── global.less
│           └── boot-loader.es6 //test.html的入口文件
├── webpack
│   ├── webpack.base.config.js
│   ├── webpack.beta.config.js
│   ├── webpack.dev.config.js
│   └── webpack.product.config.js
└── webpack.config.js

  • 所有js源码均为es6版本(*.es6)

  • ./webpack.config.js会根据不同的环境引入相应的webpack配置文件，大部分基础webpack配置都在./webpack/webpack.base.config.js里。 比如新增入口js只需在./webpack/webpack.base.config.js中修改添加entry即可

  • 所有入口html文件应该放在./html目录下，比如./html/test.html

  • webpack会将所有生成的静态资源放到./dist/static目录下，要自定义目录，请修改./f2eci.json文件中的dist字段和static-src字段

  • 如同basic脚手架一样，CI在构建时会通过gulp将./html下的所有文件复制到./dist中，并将./dist中的文件部署到远程CDN上

  • 所有代码都应放到./src目录下，不同页面对应的资源应放在./src/pages/[page-name]目录下

  • 所有公共代码都应放到./src/lib目录下

webpack+cortex+es6+react+less

待工程初始化完毕后可以看到工程目录如下

.
├── LICENSE
├── README.md
├── cortex.json
├── f2eci.json
├── gulpfile.js
├── html
│   ├── static
│   │   └── i
│   │       └── icon-right.png
│   └── test.html   //示例html页面
├── index.js
├── npm-debug.log
├── package.json
├── server.js
├── src
│   ├── lib
│   │   └── hello.es6
│   └── pages
│       └── test
│           ├── assets
│           │   ├── i
│           │   │   ├── icon-wrong.png
│           │   │   └── upload.png
│           │   └── styles
│           │       ├── global.less
│           │       └── index.less.module
│           ├── boot-loader.jsx //test.html的入口文件
│           └── index.jsx   //react组件test的入口文件
├── webpack
│   ├── webpack.base.config.js
│   ├── webpack.beta.config.js
│   ├── webpack.dev.config.js
│   └── webpack.product.config.js
└── webpack.config.js

同webpack+cortex+es6+less脚手架一样

  • 所有js源码均为es6版本(*.es6) * ./webpack.config.js会根据不同的环境引入相应的webpack配置文件，大部分基础webpack配置都在./webpack/webpack.base.config.js里。 比如新增入口js只需在./webpack/webpack.base.config.js中修改添加entry即可

  • 所有入口html文件应该放在./html目录下，比如./html/test.html

  • webpack会将所有生成的静态资源放到./dist/static目录下，要自定义目录，请修改./f2eci.json文件中的dist字段和static-src字段

  • 如同basic脚手架一样，CI在构建时会通过gulp将./html下的所有文件复制到./dist中，并将./dist中的文件部署到远程CDN上

  • 所有代码都应放到./src目录下，不同页面对应的资源应放在./src/pages/[page-name]目录下

  • 所有公共代码都应放到./src/lib目录下

  • 作用域为全局的样式文件以.less或者.css结尾

  • 模块内作用域的样式文件以.less.module或者.css.module结尾

  • react的jsx(*.jsx)代码规范请参考airbnb

webpack+cortex+es6+react+redux4app

待工程初始化完毕后可以看到工程目录如下

.
├── LICENSE
├── README.md
├── cortex.json
├── f2eci.json
├── gulpfile.js
├── html
│   ├── static
│   │   └── i
│   │       └── icon-right.png
│   └── index.html   //示例html页面
├── index.js
├── npm-debug.log
├── package.json
├── server.js
├── src
│   ├── common
│   │   └── css
│   │   │   └─── 各种初始化页面样式less
│   │   └───js    
│   │       └─── 工具函数
│   └── pages
│       └── test
│           ├── assets
│           │   ├── i
│           │   │   ├── icon-wrong.png
│           │   │   └── upload.png
│           │   └── styles
│           │       ├── global.less
│           │       ├── index.less//主页面入口less
│           │       └── index.less.module
│           ├── container //容器组件,可做单独注入的组件
│           ├── boot-loader.jsx //test.html的入口文件
│           └── index.jsx   //react组件test的入口文件
├── webpack
│   ├── webpack.base.config.js
│   ├── webpack.beta.config.js
│   ├── webpack.dev.config.js
│   └── webpack.product.config.js
└── webpack.config.js

同webpack+cortex+es6+less脚手架一样

  • 所有js源码均为es6版本(*.es6) * ./webpack.config.js会根据不同的环境引入相应的webpack配置文件，大部分基础webpack配置都在./webpack/webpack.base.config.js里。 比如新增入口js只需在./webpack/webpack.base.config.js中修改添加entry即可

  • 所有入口html文件应该放在./html目录下，比如./html/test.html

  • webpack会将所有生成的静态资源放到./dist/static目录下，要自定义目录，请修改./f2eci.json文件中的dist字段和static-src字段

  • 如同basic脚手架一样，CI在构建时会通过gulp将./html下的所有文件复制到./dist中，并将./dist中的文件部署到远程CDN上

  • 所有代码都应放到./src目录下，不同页面对应的资源应放在./src/pages/[page-name]目录下

  • 所有公共代码都应放到./src/lib目录下

  • 作用域为全局的样式文件以.less或者.css结尾

  • 模块内作用域的样式文件以.less.module或者.css.module结尾

  • react的jsx(*.jsx)代码规范请参考airbnb

webpack+cortex+es6+vue

待工程初始化完毕后可以看到工程目录如下

.
├── LICENSE
├── README.md
├── cortex.json
├── f2eci.json
├── gulpfile.js
├── html
│   └── index.html   //示例html页面
├── index.html
├── package.json
├── src
│   ├── main.js   //项目入口文件
│   └── App.vue   //vue应用入口文件
└── webpack.config.js

  • 所有js源码均为es6版本

  • 所有入口html文件应该放在./html目录下，比如./html/index.html

  • 如同basic脚手架一样，CI在构建时会通过gulp将./html下的所有文件复制到./dist中，并将./dist中的文件部署到远程CDN上

  • 所有代码都应放到./src目录下

  • vue入门文档请参考 cn.vuejs.org

关于HTML文件

静态化html

将html文件放到./html中，CI会将./html目录下的文件复制到./dist中，并直接部署到cdn上，用户直接通过访问cdn上的xxx.html来展示页面

  • html发布后的beta环境地址为http://h5.51ping.com/app/[project-name]/[page-name].html
  • html发布后的线上地址为http://h5.dianping.com/app/[project-name]/[page-name].html
  • 静态资源文件地址为http://www.dpfile.com/app/[project-name]/path/to/file.min.md5.js

html示例文件如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
    <title>大众点评</title>
    <meta name="description" content=""/>
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no"/>
    <link rel="stylesheet" type="text/css" href="./static/[webpack-entry-name].css" />  //webpack生成的样式文件
</head>
<body>
<div id="app">
 
</div>
<script type="text/javascript">
    var _hip = [    //初始化打点配置
        ['_autoPV', false]
    ];
 
 
 
    var store={
        info:"Toasted by @cortex/wepp-module-toast"
    };
</script> 
<script type="text/javascript" src="./static/common.js"></script>   //webpack生成的lib文件
<script type="text/javascript" src="./static/[webpack-entry-name].js"></script> //webpack生成的entry文件
 
</body>
</html>
 
动态生成html

一般我们使用java的ftl来实现动态页面

ftl示例文件如下

<#assign cortex=JspTaglibs["http://www.dianping.com/neocortex"]>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 
    <title>大众点评</title>
    <meta name="description" content=""/>
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no"/>
    <link rel="stylesheet" type="text/css" href="<@cortex.staticResource decorate="false" resources="/app/[project-name]]/static/[webpack-entry-name].css" />" />
 
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
    var _hip = [
        ['_autoPV', false]
    ];
    var store={
        info:'Hello World'
    };
</script>
<script type="text/javascript" src="<@cortex.staticResource decorate="false" resources="/app/[project-name]]/static/common.js" />"></script>
<script type="text/javascript" src="<@cortex.staticResource decorate="false" resources="/app/[project-name]]/static/[webpack-entry-name].js" />"></script>
 
</body>
</html>

具体ftl标签请看参考这里

如何用webpack组织代码

入口

入口js必须自执行,例如

class BootLoader  {
    constructor (props) {
        if (!_ins) {
            _ins=this;
        }
        return _ins;
    }
 
    static getInstance() {
        if (!_ins) {
            _ins=new BootLoader();
        }
        return _ins;
    }
 
    init() {
        ReactDom.render(<Test />, document.getElementById('app'));
    }
}
 
BootLoader.getInstance().init();

同步加载

加载lib文件夹下的文件

当pages下目录结构非常复杂的时候，要引用lib下的js会导致相对路径非常长，我们可以使用自定义短名的方式去引用lib下的js

import Example from '@lib/a/b/c/example.js';
加载npm包

先安装要加载的包

npm install react --save

再在代码中引用

import React from 'react';
 
加载cortex包

比如我要加载cortex下的Toast包

先用cortex安装Toast包

cortex install wepp-module-toast

再在代码中引用

import Toast from "@cortex/wepp-module-toast";
 
...
 
Toast("Hello World");
 
...
加载样式文件

支持css,less文件，若要支持其他样式文件请自行配置webpack中的loader

加载全局样式文件(必须以.less结尾)

import './assets/styles/base.less.global';
 

加载模块级作用域的样式文件CSSModules（配合react或其他js框架使用）

./assets/styles/index.less.module

 
.red {
    color:#ff0000;
    font-size:20px;
}
 
import styles from './assets/styles/index.less.module';//*.less.module样式文件默认以css modules模式载入
class App extends React.Component {
    constructor () {
        super();
    }
 
    render() {
        return (//react css modules示例
            <div className={styles.red}>
            	I'm red.
            </div>
       );
    }
}
 

.red样式的作用域只局限于该react component,这样就可以随便写样式class name而不必担心命名空间污染的问题

加载图片

webpack会对所有图片进行压缩处理

  • 样式中引入图片

    在样式文件中正常引入图片即可，所有图片将以base64的方式打入js中

  • DOM中引入图片

    import icon from './assets/i/icon-wrong.png';
     
    ...
     
    render() {
        return (<img class="img" src={icon}/>)
    }
     
    ...
     
异步加载

webpack支持异步加载js文件

require.ensure([],(require)=>{//异步加载JS示例
        var Hello = require('../lib/hello.es6').default;
        Hello.sayHelloWorld();
});

cortex in webpack

通过引入cortex-recombiner-webpack-plugin使得webpack支持cortex包

webpack.base.config.js

var CortexRecombinerPlugin=require('cortex-recombiner-webpack-plugin');
 
...
 
module.exports={
    ...
    plugins: [
        new CortexRecombinerPlugin({
            base:path.resolve(__dirname,relativeToRootPath),//项目根目录的绝对路径
        })
    ]
    ...
}
 
 

打点

  • 必须现在html中进行打点初始化配置
var _hip = [//如果需要打点,此设置必须
    ['_autoPV', false]//手动关闭自动PV打点,打点逻辑自行添加到js相关代码中
];
  • 入口中显示引入hippo库
import Hippo from '@cortex/hippo';//对于cortex包的引入,需在包名前加上@cortex/的前缀以示区分
  • 显示打点
_hip.push(['_setPageId', 12345]);
_hip.push(['pv']);

更多打点规范请参考官方打点文档

注意

  • 在使用本生成器之前，记得切换为公司内部的npm源，cortex源
npm config set registry http://r.npmjs.dp
cortex config set registry http://registry.cortex.dp

  • 为了更容易发现问题，请将本地node版本与线上CI同步（当前CI node版本为v4.3.1）

  • 引入cortex包的时候必须以@cortex/xxx的包名形式引入

import Toast from "@cortex/wepp-module-toast";
  • html中必须先载入库文件common.js再载入入口文件index.js 如果要使用打点功能，必须在html/ftl中显示初始化
var _hip = [//如果需要打点,此设置必须
    ['_autoPV', false]//手动关闭自动PV打点,打点逻辑自行添加到js相关代码中
];

去除图片压缩模块

因为webpack的图片压缩模块image-webpack-loader安装时需要本地编译，所以会非常缓慢，导致CI上线发布时会造成构建进程假死的问题。因此新版本的generator-peon-static去掉了图片压缩模块。

  • 对于新建项目，直接升级generator-peon-static到最新版本即可

    npm update -g generator-peon-static

  • 对于已使用老版本生成的项目，需要手动去除图片压缩模块，步骤如下

    去掉your_project/package.json里的devDependencies下的image-webpack-loader模块

            "image-webpack-loader": "^1.8.0",//删掉这行

    找到your_project/webpack/webpack.base.config.js文件,将

            test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: env == "dev" ? ["url?limit=25000"] : [
            'url?limit=25000',
            'image-webpack?progressive&optimizationLevel=3&interlaced=false'
         ]

    改为

        test: /\.(jpe?g|png|gif|svg)$/i,
    loaders: ["url?limit=25000"]

    重新提交代码构建即可

Readme

Keywords

Package Sidebar

Install

npm i generator-peon-static

Weekly Downloads

0

Version

0.0.40

License

MIT

Last publish

Collaborators

  • yangtao.li
  • jianhua.zhong
  • madlord
Try on RunKit
Report malware