Duan Hong +

pepper doc

npm install we-pepper -g # install pepper globally
pepper init [project_name] 

# create a starter project
.
├── /dist/                              # 代码打包目录
├── /node_modules/                      # node依赖包
├── /src/                               # 源码目录
│   ├── /pages/                         # 页面
│   ├── /components/                    # 公用组件
│   ├── /assets/                        # 图片、字体资源
│   ├── /scss/                          # 公用样式    
│   └── /utils/                         # 公用JS模块
├── pepper.config.js                    # pepper的配置文件
├── index.template.html                 # 首页HTML模版, 可选
└── package.json                        # 这个就不用说了吧
pepper start
# or
pepper start -p PORT

该命令会启动一个 express 服务,负责托管所有的静态资源,支持 Code Hot Load,支持 Mock 服务,支持路由和数据格式的配置。

注意:该模式下,静态资源都缓存在内存中,配置的build目录里是看不到静态资源的

? 选择要执行的任务:  (Use arrow keys)
❯ 项目打包
开发调试
初始化新项目 (es5)
初始化新项目 (es6 & react & react-router)
初始化新项目 (es6 & react & react-router & redux)
创建新页面
创建新组件
升级pepper

#### 配置清单

{
    "host": "0.0.0.0",
    "port": "8080",
    "base": "src",
    "build": "dist",
    "static": { // CDN domain, or just leave it blank if not using
        "start": "/",
        "test": "/",
        "pre": "//static.wepiao.com/",
        "release": "//static.wepiao.com/"
    },
    "globals": {  // 配置全局变量,这里配置了 static_api  api 两个全局变量
        // static api
        "static_api": {
            "start": "", // local api base entry
            "test": "//m.wepiao.com",
            "pre": "//m.wepiao.com", // online api base entry
            "release": "//m.wepiao.com"
        },
        "api": {
          "start": "",
          "test": "",
          "pre": "//api.wepiao.com",
          "release": "//api.wepiao.com"
      }
    },
    "vendor": ["react", "react-dom"],
    "alias": {
        "wepiao": "components",
        "scss": "scss"
    },
    "devtool": "source-map",
    "template": {
        "path": "index.template.html", //使用自定义模版,忽略下面所有设置
        "title": "",
        "keywords": "",
        "description": "",
        "viewport": "",
        "favicon": "assets/images/favicon.ico"
    },
    "pages": "pages",
    "scss": "scss",
    "components": "components",
    "assets": "assets",
    "eslint": false, // 如果启用该选项,请在项目根目录提供自己的 `.eslintrc`
    "css_modules": false,
    "transfer_assets": false,
    "base64_image_limit": 10240,
    "esmode": 'es6' // swith esmode on template creating, es5/es6, default to es6
}

注意:路径的配置建议使用 //开头,省去协议名字 http:,这主要是为了向 https 迁移,因为//资源,会使用和当前网页相同的协议加载资源。

key 说明
host 调试IP, 默认0.0.0.0
port 调试端口, 默认8080
base 业务代码根目录
build 代码打包目录
static 静态资源跟路径,便于切换到CDN
api 接口根路径
vendor 打包类库资源
alias 路径别名, 添加后,在任意子目录引用: import { some_thing } from 'alias_name/..'
devtool webpack调试模式设置, 具体参见: webpack-devtool
pages 自定义 pages 路径
scss 自定义 scss 路径
assets 自定义 assets 路径
components 自定义 components 路径
eslint 是否开启 eslint,默认关闭, 如果启用该选项,请在项目根目录提供自己的 .eslintrc
css_modules 是否启用 CSS Modules, 默认关闭
esmode 模版代码风格,支持 es5es6 , 默认为 es6, 兼容 es7
transfer_assets 打包时是否 copy asset 目录,默认 false
base64_image_limit 对所有小于该大小的图片启用 base64 转码, 默认 10240 (10k)
template.title: 模版 document.title
template.keywords 模版 meta keywords, 默认为空
template.description 模版 meta description, 默认为空
template.viewport 模版 meta viewport, 默认width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no
template.favicon 模版 favicon, 默认为空
template.path: 设定自定义模版的的路径,会替换默认模版,可选。设置后会忽略上面五项模版设置. 有语法要求, 参考index.template.html

补充说明

pepper.config.js中配置的globals中的配置将在代码中将以全局变量’UPPER_CASE’的形式导出 ,例如API和STATIC

console.log(API) // pepper.config.js中的api[MODE]设置,注意使用环境
Reqwest({
 url: API + '/your_sub_url',
 ...
})
构建模式 说明
start 开发调试, 静态资源内存缓存, 启express服务,可自定义端口和host,hot reload
test 测试模式,不启服务,不压缩
pre 预发布,不启服务,压缩
release 发布模式, 不启服务,压缩

Wanna say something ?

Blog

Friends