平凡公子

Theme

node-router开发之：环境搭建

2018年9月1日

简介 ​

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

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

初始化项目 ​

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

mkdir node-router
cd node-router
npm init

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

json
{
  "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:

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

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

平凡公子 ➜  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的配置文件：

js
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文件里添加：

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

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

安装jsdoc ​

首先：

yarn add jsdoc --dev

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

jsdoc xxx.js

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

安装配置babel ​

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

安装babel-cli:

yarn add babel-cli --dev

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

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

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

npm run build

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

yarn add babel-preset-env --dev

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

{
  "presets": ["env"]
}

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

Copyright © 2024 by 平凡公子