简介

首先简单介绍下背景,在上篇随笔博文谈谈近况及感想中有简单介绍过最近的近况,及近期的学习计划,而本项目(一个简单node端路由插件)就是当前开始的第一步!而本项目计划使用订阅/发布模式,开发出一个具备完整路由转发功能的路由插件!

那么废话不多说,从现在开始,正式进入到node-router项目开发中,本文主要是为了记录本项目在环境搭建,eslint配置,jsdoc,babel配置等环境相关的经历!

初始化项目

首先在电脑上创建项目目录,并使用npm init来初始:

1
2
3
mkdir node-router
cd node-router
npm init

然后根据提示一步步进行填写,最后生成的package.json文件如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
"name": "simple-router",
"version": "1.0.0",
"description": "a simple node route",
"main": "index.js",
"scripts": {
"test": "mocha"
},
"repository": {
"type": "git",
"url": "git+https://github.com/yuge9413/node-router.git"
},
"keywords": [
"router",
"simple router",
"node router"
],
"author": "yuge9413",
"license": "ISC",
"bugs": {
"url": "https://github.com/yuge9413/node-router/issues"
},
"homepage": "https://github.com/yuge9413/node-router#readme"
}

好了,到这里项目目录就初始化好了,接下来我们往里添加eslit检查!

添加eslit

说实话,这也是我第一次自己动手安装配置eslint,不过还好,过程还算简单顺利!

首先,安装eslint:

1
2
// 这里我使用的是yarn
yarn add --dev eslint

安装完成之后使用./node_modules/.bin/eslint –init命令初始化eslint,以下为本项目的初始化配置:

1
2
3
4
5
6
7
8
9
10
11
平凡公子 ➜  node-router git:(dev) ✗ ./node_modules/.bin/eslint --init
? How would you like to configure ESLint? Answer questions about your style
? Which version of ECMAScript do you use? ES2018
? Are you using ES6 modules? Yes
? Where will your code run? Node
? Do you use JSX? No
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Single
? What line endings do you use? Unix
? Do you require semicolons? Yes
? What format do you want your config file to be in? JavaScript

在上面的初始化完成之后,会在项目目录里生成一个名为.eslintrc.js的配置文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
module.exports = {
"env": {
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
"indent": [
"error",
"tab"
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
]
}
};

在配置完成之后,我们可以在package.json文件里添加:

1
2
3
4
"scripts": {
"test": "mocha",
+ "lint": "eslint --ext .js src",
},

然后就可以在命令行运行npm run lint来执行eslint检查了,好了,到这里eslint基本就配置完了,接着我们往项目里添加jsdoc用于生成文档!

安装jsdoc

首先:

1
yarn add jsdoc --dev

安装完成之后,在日常开发时,只要安装jsdoc的规范写好注释,就可以使用:

1
jsdoc xxx.js

生成文档了,当然jsdoc不仅能生成html文档,还可以生成md文档,当然有关jsdoc具体的注释规范及命令行参数,大家自行去查看JSDoc中文文档!

安装配置babel

首先上面已经介绍了,本项目主要是用来练手学习了,所以在js语法的选择上,选择了最的新es2018!那么为了保证兼容,就需要将js代码编译成es5,这就需要用到babel了!

安装babel-cli:

1
yarn add babel-cli --dev

安装完成之后,可以在package.json文件中添加:

1
2
3
4
5
"scripts": {
"test": "mocha",
"lint": "eslint --ext .js src",
+ "build": "babel src -d lib"
},

那么就可以通过在命令行运行:

1
npm run build

来进行编译!当然在这之前,我们还需要创建 .babelrc 配置文件,然后你可以安装env preset来转换ES2015+的代码:

1
yarn add babel-preset-env --dev

安装完成之后,你需要在.babelrc 配置文件里添加:

1
2
3
{
"presets": ["env"]
}

好了,到这里基本有关babel的安装配置就完成了,如果大家有什么问题可以访问babel官网,有关于env preset大家可以查看env preset的相关说明!