# pepper 使用文档 ### 安装pepper ``` npm install we-pepper -g ``` ### 使用 ``` ? 选择要执行的任务: (Use arrow keys) ❯ 升级pepper 初始化新项目 (es5) 初始化新项目 (es6) 开发调试 创建新页面 创建新组件 项目打包 ``` 使用⬆️和⬇️选择任务 ### 初始化项目 ``` ➜ Wepiao pepper ? 选择要执行的任务: 初始化新项目 (es5) ? 请输入项目的名称: [英文] demo 项目 demo 创建成功 正在安装依赖： npm install ... npm WARN package.json pepper_demo@0.0.1 No repository field. npm WARN package.json pepper_demo@0.0.1 No README data classnames@1.2.2 node_modules/classnames react-dom@0.14.3 node_modules/react-dom reqwest@2.0.5 node_modules/reqwest react-router-component@0.27.2 node_modules/react-router-component ├── object-assign@4.0.1 ├── qs@5.2.0 ├── url-pattern@0.10.2 └── urllite@0.5.0 (xtend@4.0.1) react@0.14.3 node_modules/react ├── fbjs@0.3.2 (whatwg-fetch@0.9.0, ua-parser-js@0.7.10, loose-envify@1.1.0, promise@7.0.4, core-js@1.2.6) └── envify@3.4.0 (through@2.3.8, jstransform@10.1.0) ``` > ⚠️：选择`es5`后，模版的创建也会采用`es5`，可以在`pepper.config.js`中修改，支持`es5`和`es6`，默认为`es6` **生成的目录结构如下** ``` ➜ Wepiao tree demo -L 2 demo ├── mock.js ├── node_modules │   ├── classnames │   ├── react │   ├── react-dom │   ├── react-router-component │   └── reqwest ├── package.json ├── pepper.config.js ├── src │   ├── assets │   ├── components │   ├── pages │   ├── scss │   └── utils └── template.html 12 directories, 4 files ``` ### 本地预览 > *选择开发调试* 任务 **结果如下:** ``` ➜ demo pepper start Listening at http:// 0.0.0.0 9527 webpack built 4c3082a88bad713a7d1c in 9197ms Hash: 4c3082a88bad713a7d1c Version: webpack 1.12.9 Time: 9197ms Asset Size Chunks Chunk Names js/home-60936f25.js.map 39.5 kB 1 [emitted] home js/commons.bundle.js 91.2 kB 0 [emitted] shared js/about-ae93d322.js 2.65 kB 2 [emitted] about js/list-5a9a51f1.js 12.3 kB 3 [emitted] list js/404-6bc3bea2.js 775 bytes 4 [emitted] 404 js/vendor.bundle.js 681 kB 5 [emitted] vendor js/commons.bundle.js.map 123 kB 0 [emitted] shared js/home-60936f25.js 29.9 kB 1 [emitted] home js/about-ae93d322.js.map 4.72 kB 2 [emitted] about js/list-5a9a51f1.js.map 14.4 kB 3 [emitted] list js/404-6bc3bea2.js.map 748 bytes 4 [emitted] 404 js/vendor.bundle.js.map 814 kB 5 [emitted] vendor index.html 696 bytes webpack: bundle is now VALID. ``` 在浏览器打开`http://localhost:9527`预览 > ⚠️: 更改端口`pepper start -p YOUR_PORT` 或者更改`pepper.config.js`中的`port`设置 ### 创建页面 > 创建页面任务 ``` ➜ demo pepper page footer 页面 Footer 创建成功] 目录:src/pages/footer page Footer created @pages/Footer // edit pages/index.jsx, add the following code var Footer = require("react-proxy?name=Footer!./Footer"); ... ... ... ... ➜ demo tree src/pages -L 2 src/pages ├── footer │   ├── index.jsx │   └── style.scss ├── about │   ├── index.jsx │   └── style.scss ├── home │   ├── index.jsx │   └── style.scss ├── index.jsx ├── list │   ├── data.js │   ├── index.jsx │   ├── item.jsx │   └── style.scss └── notfound └── index.js 5 directories, 12 files ``` **可以看到`pages`目录下多出了`footer`，然后按照提示修改就可以后，访问对应的URL就可以了** ### 创建组件 > 创建组件任务 ``` ➜ demo pepper component Slider 组件 Slider 创建成功 目录:src/components/Slider component Slider created @components/ Slider // edit commponents/index.jsx to export current component out. var Slider = require("./Slider"); ... module.exports = { ... Slider:Slider, ... }; ➜ demo tree src/components -L 2 src/components ├── Header │   ├── index.jsx │   └── style.scss ├── Hello │   ├── index.jsx │   └── style.scss ├── Slider │   ├── index.jsx │   └── style.scss └── index.jsx 3 directories, 7 files ``` > **具体操作参考提示信息** ### 代码打包 > 代码打包任务 ``` ➜ demo pepper ? 选择要执行的任务: 项目打包 ? 请选择打包环境 : (Use arrow keys) ❯ test 环境 pre 环境 release 环境 ``` 其实还包括最开的调试，打包环境的区别如下： - start 静态资源在内存中 - test 静态资源dist目录，不启用压缩 - pre 静态资源dist目录，启用压缩 - release 静态资源dist目录，启用压缩 除此之外，区别在于`pepper.config.js`配置中 ``` // CDN domain, or just leave it blank if not using "static": { "start" : "", // here use relative path "test" : "", "pre" : "http://static.wepiao.com/",// here use CDN domain "release" : "http://static.wepiao.com/" // here use CDN domain }, // API base entry // config `mock.js` for CROS solution "api": { "start" : "", // local api base entry "test" : "", "pre" : "http://wx.wepiao.com", // online api base entry "release" : "http://wx.wepiao.com" } ``` ### 其他 > `tree`命令 `brew install tree` 非`start`静态资源预览： - python -m SimpleHTTPServer PORT