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

jopen 10年前

从开始打算写一个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