JavaScript Dev Toolkit

Table of Contents

1 Node

Node.js 是基于Google V8引擎的服务端JavaScript环境,
npm 是内置在Node.js中的一个JavaScript包管理工具。类似于Perl中的CPAN。

1.1 npm基本使用

npm的参数格式为:

$ npm <command>

参考:
http://tobyho.com/2012/02/09/tour-of-npm/

1.1.1 生成文件package.json

在nodejs项目的根目录中一般有package.json文件,它定义了这个项目所需要的各种模块,以及项目的配置信息(如项目名称、版本、许可证等等)。

使用 npm init 可以生成package.json文件。

$ npm init                 # 以交互式的方式生成文件package.json

关于package.json的格式可参考 package.json

1.1.2 安装package

下面是 npm install <package name> 的基本使用:

$ npm install                             # 不指定软件包名字时,会安装当前目录中文件“package.json”中指定的所有依赖软件包
$ npm install <package name>              # 默认会安装在当前目录
$ npm install <package name> --save       # 默认会安装在当前目录,而且把软件包名字保存到“package.json”的dependencies节中
$ npm install -g <package name>           # 安装包在全局位置
$ npm install --verbose <package name>    # 安装软件时显示更详细信息

1.1.3 获取npm帮助信息

可用下面命令获取相关帮助文档:

$ npm help        # 显示简要帮助信息
$ npm -l          # 列出各个命令的使用说明
$ npm <cmd> -h    # 显示命令 cmd 的帮助信息

1.2 npm配置

1.2.1 npm设置代理

可以用下面命令来设置代理。

$ npm config set proxy http://proxy.company.com:8080
$ npm config set https-proxy http://proxy.company.com:8080     # 注意:不是https_proxy

可以用下面命令查看当前设置:

$ npm config get proxy
$ npm config get https-proxy                                   # 注意:不是https_proxy

参考:https://jjasonclark.com/how-to-setup-node-behind-web-proxy

1.3 Bower

和npm类似,Bower也是一个包管理工具。不过,Bower往往用于前端项目,而不是后端nodejs项目。

用下面命令可以安装Bower:

$ npm install -g bower

安装完bower后,可以用它安装其它包了。如:

$ bower install <package>

1.3.1 bower设置代理

在文件~/.bowerrc中可以设置代理。如:

$ cat ~/.bowerrc
{
  "proxy":"http://<user>:<password>@<host>:<port>",
  "https-proxy":"http://<user>:<password>@<host>:<port>"
}

2 Grunt

Grunt 是一个Javascript Task Runner(Javascript任务运行器),可用于自动化构建、测试、生成文档的项目管理工具。

$ npm install -g grunt-cli
$ npm install -g grunt

3 Yeoman

Yeoman 是一个脚手架工具,可以方便的为你产生一个初始项目,标准的文件夹布局,标准的包依赖,初始的页面例子。Yeoman提供一些generators,用来生成不同的项目。

$ npm install -g yo

4 ESLint

ESLint是JavsScript静态分析工具,可以发现JavsScript代码中潜在的问题。类似的工具还有JSLintJSHint

$ npm install -g eslint      # 安装ESLint
$ eslint --init              # 第一次运行ESLint时,需要先运行 eslint --init 来生成配置文件
$ eslint yourfile.js         # 使用ESLint分析文件yourfile.js

ESLint支持的配置文件格式有很多,比如“.eslintrc.yaml”(YAML格式)或者“.eslintrc.json”(JSON格式)等等。

下面是文件“.eslintrc.json”的一个例子:

{
    "env": {
        "browser": true,
    },
    "extends": "eslint:recommended",
    "globals": {
        "$": true
    },
    "rules": {
        "linebreak-style": [
            "error",
            "unix"
        ],
        "semi": [
            "error",
            "always"
        ],
        "no-unused-vars": [
            "error",
            { "vars": "local" }
        ]
    }
}

配置规则时,可以使用"off"来禁止它,或者"warn"/"error"来打开它,具体含义如下:
"off" or 0 - turn the rule off
"warn" or 1 - turn the rule on as a warning (doesn’t affect exit code)
"error" or 2 - turn the rule on as an error (exit code will be 1)

参考:http://eslint.org/

5 代码格式化工具js-beautify

js-beautify是一个代码格式化工具,它不仅支持格式化JavaScript,还格式化css和html代码。

js-beautify安装:

$ npm -g install js-beautify   # 安装

js-beautify使用:

$ js-beautify -r foo.js           # -r 表示replace,即直接修改原文件
$ css-beautify -r foo.css         # 相当于 js-beautify --css foo.css
$ html-beautify -r foo.html       # 相当于 js-beautify --html foo.html

js-beautify配置:可以使用文件“.jsbeautifyrc”对js-beautify进行设置。下面是“.jsbeautifyrc”的一个例子:

{
    "indent_size": 4,
    "html": {
        "end_with_newline": true,
        "js": {
            "indent_size": 2
        },
        "css": {
            "indent_size": 2
        }
    },
    "css": {
        "indent_size": 1
    },
    "js": {
       "preserve-newlines": true
    }
}

注:文件“.jsbeautifyrc”可以放到当前目录( $PWD )到根目录的任何一个目录中。

参考:https://www.npmjs.com/package/js-beautify


Author: cig01

Created: <2016-05-30 Mon 00:00>

Last updated: <2017-07-22 Sat 21:15>

Creator: Emacs 25.1.1 (Org mode 9.0.7)