1.创建项目-github创建项目 & .gitignorr
NodeJS最强的是web场景,接下来我们会建立一个静态资源服务器。
实现的效果是,在当前目录执行命令就会将当前目录变成一个静态资源服务器的根目录,从而可以使用url来访问到里面的文件夹或文件。实际上这个已经有个很好的实现了,直接在命令行输入anywhere既可以实现这个功能,这个功能是NodeJS的作者普宁老师写的。我们将要实现的就是这类似的效果。
开始!
进入github,创建一个仓库,注意这里我们要勾选readme,readme使用来写一些指南介绍之类的。然后我们选中gitignore,在使用git的过程中我们需要将文件传到我们的仓库中,在传的时候我们希望有一些文件不要进行上传就可以将这些文件添加到.gitignore中。注意!.gitignore是隐藏文件,在linux下要使用ls -a进行查看。比较典型的是Node_modules文件夹里面的模块并不需要上传上去,因为安装配置的目录都在package.json里面,使用者只需要下载来然后使用npm install安装就可以了。这样可以使代码量减少,看起来不那么的臃肿。在gitignore的选项选择Node版本的。Licence选择则层MIT,MIT意味着这个仓库的版权是非常的开放的。到这里仓库就创建好了。
接下来,选择clone的方式,有两种模式,一种ssh一种https,对于初学者而言https的方式无疑是比较方便的,只需要在github bash里面直接clone到本地就好了,而我们将会使用ssh key来进行clone。使用ssh必须是这个项目的拥有者,否则是无法添加ssh key的。
https vs ssh
- https可以随意clone github上面的任何项目,而不管这个项目的所有者是谁;而ssh必须是这个项目的拥有者或管理员,并且需要先添加SSH key,否则无法进行clone操作。
- https url在push的时候是需要验证用户名和密码的;而SSH在push的时候是不要输入用户名的,如果配置SSH key的时候设置了密码,则需要输入密码。
添加SSH key步骤
1.检查电脑是否已经有SSH key
这是为了检查是否已经存在了id_rsa.pub和id_dsa.pub文件,如果已经存在了,就可以跳过步骤二。
2.创建一个SSH key
命令后面输入的是自己的邮箱地址,执行命令后会问两个问题,第一个是说文件名,直接回车,就会使用默认的文件名,那么就会生成id_rsa.pub和id_dsa.pub两个密匙文件,接着会提示设置密码,这里是前面提到的push时候用的密码,直接回车就会不适用密码push,直接交到github上。看到后面的那段代码就证明SSH key已经创建成功了,说明了两个密匙的位置。
另外提一下命令行参数的含义。
-t 指定密匙类型,默认是rsa,可以省略
-C 设置注释文字,这里注释是邮箱
-f 指定密匙文件存储文件名,这里忽略了这个参数,因此会提示让输入一个文件名用来保存生成的SSH key。我们就用默认的。
3. 添加SSH key到github上面去
首先拷贝id_rsa.pub文件的内容,可以用编辑器打开复制。
然后登录github的账号,从右上角的Account Setting进入,然后点击SSH key进入。
接下来点击Add SSH key按钮来调价一个SSH key,把刚才在剪切板的代码粘贴过来就可以了,上面的title可以不填,默认使用邮件名称。到这里就创建好了。
4. 测试一个SSH
在设置好SSH了之后使用git clone将我们的仓库克隆下来。接下来介绍一下几个进行项目管理比较重要的东西。
1.readme
显然里面存放的是项目的介绍,使用方法等等。
2..gitignore
在上传代码的时候忽略掉一些文件,有些文件没有必要上传到网络中,最典型的有
- node_modules/
- logs
- npm-debug
- ide生成的文件
- build/
.gitignore的必备规则
- 匹配模式前“/”代表项目根目录
- 匹配模式最后加“/”代表是目录
- 匹配模式前加“!”代表取反,表示不忽略这个文件,这个使用的场景是有时候想要忽略掉一个文件夹,但是这个文件夹里面的一个文件不忽略掉就可以使用这个命令。
- “*”代表任意个字符(注意这里和JavaSCript不同)
- “?”匹配任意一个字符
- “**”匹配多级目录
- “#”注释
.npmignore
如果模块想让被人使用就需要发到npm上,但是在npm中有些文件不希望发,因此就写在这里。一般忽略掉:
- node_modules(这个可以不谢,因为npm会自动忽略掉)
- src
- test
注意!如果没有npmignore,但是有.gitignore,那么npm就会自动忽略掉gitignore中的东西。nomignore中会默认忽略掉一些文件,也有一些永远不会忽略:
- package.json
- readme
- changelog
- license
2.跨团队合作 – .editorconfig
有时候需要进行跨团队合作的协同开发,但是每个团队都有自己的代码风格,那么我们可以使用这个方法,让每个项目都有针对项目本身的代码风格进行配置。
根据官方介绍,EditorConfig帮助开发人员在不同的编辑器和IDE之间定义和维护一致的编码风格。 EditorConfig项目由用于定义编码风格的文件格式和一组文本编辑器插件组成,这些插件使编辑者能够读取文件格式并遵守定义的样式。 易于阅读,并且与版本控制系统配合良好。
官方EXAMPLE
[code]
# EditorConfig is awesome: http://EditorConfig.org
# top-most EditorConfig file
root = true
# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,py}]
charset = utf-8
# 4 space indentation
[*.py]
indent_style = space
indent_size = 4
# Tab indentation (no size specified)
[Makefile]
indent_style = tab
# Indentation override for all JS under lib directory
[lib/**.js]
indent_style = space
indent_size = 2
# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2
[/code]
接下来解释一个这个例子,root表示这里是不是顶层,因为editorconfigure 不只是项目之间,在不同的文件夹之间都可以进行不同的配置,也就是说可能一个文件夹是js或者css的,可以单独为文件夹进行配置。也可以通过路径的匹配来约定。但是editorconfigure会层层的往上找,先找这一层,如果没有就找上一层,直到找到或者到了顶层(root=true)为止。优先级是听最近的。
[*]:匹配所有的文件。
end_of_line是说用unix风格的回车还是用windows风格的。一般写lf表示使用unix风格的。
insert_final_newline:设置文件的最后一行有一个回车。
[*.{js,py}]:js或者python文件都使用下面的配置
charset:编码集,一般utf8
[*.py]:匹配所有的python文件
indent_style:缩进是使用空格还是tab
inent_size:缩进用几个空格。
[lib/**.js]:匹配任意级的目录
*和 **的功能是一样的,都是匹配任意支付,但是*只会匹配文件名,**可以匹配文件夹。
trim_trailing_whitespace:去掉空白字符
3.JavaScript代码检查工具 — ESLint
ESLint是一个开源的额JavaScript代码检查工具。代码检查是一种静态的分析,常用于寻找有问题的模块或代码,并且不依赖与具体的编码风格。JavaScript是一种动态的弱类型语言,在开发的过程中比较容易出错。因为没有编译程序,为了讯在JavaScript代码错误通常需要在执行过程中不断的调试,而ESLint这可以让程序员在编码的过程中发现问题而不是在执行的过程中。
ESLint是使用Node.JS编写的,这样既可以有一个快速运行的环境的同时也便于安装。ESLint的所有规则都被设计成可插入的。ESLint的默认规则和其他插件没有区别,非常的方便,这些规则可以开启也可以关闭,也可以自己进行更改。
一般规则有三种形式
- off:关掉规则-0
- warn:允许写,但是会有警告-1
- error:错误,写了会报错-2
parser是使用什么解析器:babel-eslint
ecmaVersion:使用那个版本的语言
sourceType:使用ES6 model风格还是script
env:环境配置(node,es6,mocha)
被禁用的代码段如果需要使用可以用注释暂时禁用eslint:
/* eslint-disable */
/* esliny-enabel */
如果只想一行disable可以使用:
// eslint-disable-line
这条语句必须和disable的写在同一行,如果需要不写在同意行可以使用:
// eslint-disable-next-line
另外eslint可以使用多种格式的配置文件,推荐使用js,因为json不能写注释。
配置文件中可以加root:true来设置找的最顶层。
接下来介绍一下npm scrips,这个可以在package.json里面进行配置,配置了以后就可以使用npm run来运行。可以使用npm 的precommit,让程序在提交之前运行一些命令,如果没有通过就不能提交。
上面介绍了这些要使用到的工具,下面进行具体的操作。
[code]
npm init
npm i –save-dev eslint babel-eslint</pre>
<pre>
npm pre-commit –save-dev
[/code]
注意这你的–save-dev的意思是说将其安装到本地,不将其发布到线上的环境去,由于这是代码调试工具,因为此我们并不希望它在线上环境出现,可以减少线上的包的数量。
生成了pakcage.json文件以及安装好了eslint和pre-commit,生成package.json文件的时候需要进行一些输入,我们这里可以根据自己的需求进行输入
这样根据我们刚才输入的就生成了package.json文件,这个文件非常的重要,因为当别人使用我们写的程序的时候就需要根据这个文件进行依赖的安装,这个的dependency是线上一来,devdependencies是开发环境依赖,开发环境依赖不会发布到线上环境,scripts是配置一些快速使用的命令,后面跟上这条命令要执行的语句,这些配置的语句可以使用gnpm run来执行。配置一下git
接下来我我们暂时不提交,这里我们要进行一下强约束,也就是说,我们必须让代码通过了eslint才能够提交,否则的话不允许提交。首先配置一下eslint来生成规则以及我们需要用到的文件,这里需要说明的是,我们使用的是–save-dev来安装,需要进行eslint的init才能够正常的使用eslint并生成配置文件方便我们进行进一步的配置。我们选择来回答问题来进行配置,对于这种方式安装需要
[code]
./node_modules/.bin/eslint –init
[/code]
才能够初始化,eslint官方推荐的是进行全局安装,全局安装的话直接使用eslint –init就可以进行配置了。全局安装会让我们所有的项目都用上这个配置。
进行一下我们个人的配置:
[code]
module.exports = {
“extends” : [“eslint:recommended”],
“rules”: {
“no-console”: [“error”,{
“allow”: [“warn”,”error”,”info”]
}]
},
“parser”: “babel-eslint”,
“parserOptions”: {
“ecmaVersion”: 6,
“sourceType”: “script”
},
“globals”:{
},
“env”:{
“node”:true,
“es6”:true,
“mocha”:true
}
};
[/code]