一步步搭建JavaScript框架——初始化項目

從開始打算寫一個MV*，到一個簡單的demo，花了幾天的時間，雖然很多代碼都是復制/改造過來的，然而 It Works (nginx的那句話會讓人激動有木有)。現在他叫lettuce，代碼 https://github.com/phodal/lettuce ，如果有興趣可以加入我們。

雖然js還不夠expert，但是開始了。

一步步搭建JavaScript框架

JavaScript項目名稱

一開始我做的3次commits是:

* e4e6e04 - Add README.md (3 weeks ago) <Fengda HUANG>
* 37411d7 - publish bower (3 weeks ago) <Fengda HUANG>
* aabf278 - init project (3 weeks ago) <Fengda HUANG>

是的一開始什么也沒做，除了從bower和npm上注冊了一個叫做lettuce的庫:

{
  "name": "lettuce",
  "version": "0.0.2",
  "authors": [
    "Fengda HUANG <h@phodal.com>"
  ],
  "description": "A Mobile JavaScript Framework",
  "main": "index.js",
  "moduleType": [
    "amd",
    "node"
  ],
  "keywords": [
    "lettuce",
    "mobile"
  ],
  "license": "MIT",
  "homepage": "http://lettuce.phodal.com",
  "private": false,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

然后在我們還沒有開始寫代碼的時候版本就已經是0.0.2這個速度好快。。總結如下:

• 取一個好的名字
• 在npm和bower上挖一個坑給自己
• 開始寫README.md

所以我的README.md是這樣子的

#Lettuce

> A is Mobile JavaScript Framework

Coming soon

是的，我們的代碼已經Coming soon了。

生成Javascript項目框架

為了簡化這一個痛苦的過程，我們還是用yeoman。

安裝Yeoman lib生成器

1.安裝yeoman

npm install -g yo

2.安裝generator-lib

npm install -g generator-lib

3.創建項目

 mkdir ~/lettuce && cd $_
 yo lib

接著我們就迎來了

     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------′  |    Welcome to Yeoman,    |
    ( _′U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ′   `  |° ′ Y `

[?] What do you want to call your lib? Lettuce
[?] Describe your lib: A Framework for Romantic
[?] What is your GitHub username? phodal
[?] What is your full name? Fengda Huang
[?] What year for the copyright? 2015

省略上百字，你的目錄里就會有

.
|____.editorconfig
|____.gitattributes
|____.gitignore
|____.jshintrc
|____bower.json
|____demo
| |____assets
| | |____main.css
| | |____normalize.css
| |____index.html
|____dist
| |____Lettuce.js
| |____Lettuce.min.js
|____docs
| |____MAIN.md
|____Gruntfile.js
|____index.html
|____LICENSE.txt
|____package.json
|____README.md
|____src
| |_____intro.js
| |_____outro.js
| |____main.js
|____test
| |____all.html
| |____all.js
| |____lib
| | |____qunit.css
| | |____qunit.js

這么多的文件。

Build JavaScript項目

于是我們執行了一下

grunt

就有了這么多的log:

Running "concat:dist" (concat) task
File "dist/Lettuce.js" created.

Running "jshint:files" (jshint) task
>> 1 file lint free.

Running "qunit:files" (qunit) task
Testing test/all.html .OK
>> 1 assertions passed (20ms)

Running "uglify:dist" (uglify) task
File "dist/Lettuce.min.js" created.

Done, without errors.

看看我們的Lettuce.js里面有什么

(function(root, undefined) {
  "use strict";
/* Lettuce main */
// Base function.
var Lettuce = function() {
  // Add functionality here.
  return true;
};
// Version.
Lettuce.VERSION = '0.0.1';
// Export to the root, which is probably `window`.
root.Lettuce = Lettuce;
}(this));

我們的庫寫在 立即執行函數表達式 里面。這樣便是和jQuery等庫一樣了。

grunt里的任務包含了:

• jshint 代碼檢查
• contact 合并js到一個文件
• minify js 壓縮js
• qunit 單元測試

這樣我們就可以輕松上路了。

原文  http://segmentfault.com/blog/phodal/1190000002514973