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

omgdog 发布于2019-08-22 10:56 / 2547人阅读

摘要：虽然还不够，但是开始了。一步步搭建框架项目名称一开始我做的次是是的一开始什么也没做，除了从和上注册了一个叫做的库然后在我们还没有开始写代码的时候版本就已经是这个速度好快。。生成项目框架为了简化这一个痛苦的过程，我们还是用。

从开始打算写一个MV*，到一个简单的demo，花了几天的时间，虽然很多代码都是复制/改造过来的，然而It Works(nginx的那句话会让人激动有木有)。现在他叫lettuce，代码 https://github.com/phodal/lettuce，如果有兴趣可以加入我们。

虽然js还不够expert，但是开始了。

一步步搭建JavaScript框架 JavaScript项目名称

一开始我做的3次commits是:

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

是的一开始什么也没做，除了从bower和npm上注册了一个叫做lettuce的库:

{
  "name": "lettuce",
  "version": "0.0.2",
  "authors": [
    "Fengda HUANG "
  ],
  "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 单元测试

这样我们就可以轻松上路了。

专线服务 idc机房托管一步步搭建框架一步步搭建物联网系统 javascript初始化数组 java框架项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91471.html

一步步搭建物联网系统——无处不在的三剑客

摘要：无处不在的三剑客这时我们终于了解了我们的三剑客，他们也就这么可以结合到一起了，是这一切的基础。无处不在的三剑客就这样到了这里，写得似乎很多也很少，但是还是没有做出来一个东西，于是我们朝着这样一个方向前进。无处不在的三剑客这时我们终于了解了我们的三剑客，他们也就这么可以结合到一起了，HTML+Javascript+CSS是这一切的基础。而我们用到的其他语言如PHP、Python、R...

dreamans 2019-08-22 10:55 评论0 收藏0
一步步搭建物联网系统——无处不在的CSS

摘要：与类选择器最常一起出现的是选择器，不过这个适用于比较高级的场合，诸如用控制的时候就需要用到选择器。在线查看一步步搭建物联网系统图灵电子书版一步步搭建物联网系统无处不在的CSS 或许你觉得CSS一点儿也不重要，而事实上，如果说HTML是建筑的框架，CSS就是房子的装修。那么Javascript呢，我听到的最有趣的说法是小三——还是先让我们回到代码上来吧。 CSS 下面就是我们之前...

andot 2019-08-02 16:19 评论0 收藏0
一步步搭建物联网系统——无处不在的CSS

摘要：与类选择器最常一起出现的是选择器，不过这个适用于比较高级的场合，诸如用控制的时候就需要用到选择器。在线查看一步步搭建物联网系统图灵电子书版一步步搭建物联网系统无处不在的CSS 或许你觉得CSS一点儿也不重要，而事实上，如果说HTML是建筑的框架，CSS就是房子的装修。那么Javascript呢，我听到的最有趣的说法是小三——还是先让我们回到代码上来吧。 CSS 下面就是我们之前...

dreambei 2019-08-28 18:06 评论0 收藏0
学习 JavaScript：9 个常见错误阻碍你进步

摘要：错误好高骛远最常见的错误之一就是在理解概念之后立即采取行动。其实这也是人们常说要放弃学习的常见原因之一。当项目逐渐深入时，他们就放弃学习了。关键点是，认真学习你正在学习的东西，你会得到进步。挑战意味着你正在提升个人能力，这将使你进步。 showImg(https://segmentfault.com/img/remote/1460000011209193); 前言很多人尝试学习 Ja...

SolomonXie 2019-08-22 11:09 评论0 收藏0