generate-sapling-pc

音悦台PC端项目脚手架，项目所使用的工具如下：

Node version v4.4.1

• webpack
• bower
• npm scripts
• browser-sync

How use it?

download project

git clone https://github.com/sapling-team/generator-sapling-pc.git

remove git origin and add your project new origin

git remote remove origin

git remote add origin [email protected]:sapling-team/generator-sapling-pc.git

git pull

install global bower

npm install -g bower

execute npm install

npm install --verbose

we can using npm scripts start dev product test

• npm start 启动一个服务器
• npm test 启动mocha进行自动化测试
• npm run dev 启动webpack dev构建环境
• npm run product 启动webpack product + gulp build构建可发布的资源

tools.js

你可以使用tools.js来快速的生成model和view文件，这样可以避免很多重复性的劳动。

node tools.js name.view ./app/src/views

include

在编译期来决定最终呈现什么样的HTML，使用jade的include特性来组合你的HTML。

image

写在HTML中的image推荐大家使用js的方式来处理：

var imgSrc = require('../../../images/change.gif');
this.imgContainer.html('<img src="'+imgSrc+'"/>');

compile.config

配置你的config文件,这个文件主要针对不是webpack打包而是用script方式创建的优化

{
  "random":true,
  "script":[
      "jquery/dist/jquery.min.js",
      "underscore/underscore-min.js",
      "backbone/backbone-min.js"
  ],
  "style":[],
  "title":{
    "index":"webpack index",
    "code":"webpack code"
  }
}

模块化

js使用commonjs模块化规范来组织

CDN

使用npm run build时可以在webpack.product.config.js文件中找到publicPath替换成你使用的CDN地址。

eslint

在commit阶段会做一次review，如果不通过eslint将不会触发git commit hook来提交源代码，我们使用了https://github.com/typicode/husky这个工具帮助我们做了shell脚本。

• Airbnb JavaScript Style Guide

基础库

• jquery
• underscore
• backbone
• base-extend-backbone
• auxiliary-additions

阅读base-extend-backbone和auxiliary-additions来熟悉如何使用base扩展和其他通用的函数库。

第三方库处理

如果是不支持commonjs语法的第三方插件或者库，你可以使用导出的方式，建议你放置在link目录下。