Linux 搭建 JavaScript 环境

2017-09-12 Tuesday    


简单介绍下 JavaScript 经常使用的工具。

NodeJS

可以从 nodejs.org 下载最新的二进制包解压安装,也可以通过如下方式安装仓库源,以 CentOS 为例,会添加到 /etc/yum.repos.d 目录下,其中 setup_NN.x 是使用的版本号。

# curl -sL https://rpm.nodesource.com/setup_14.x | bash -
# yum -y install nodejs

注意,此时 node 以及 npm 都会安装。然后,可以通过如下方式进行测试。

$ node --version
$ npm --version

$ echo 'console.log("Hello World!");' > /tmp/hello.js
$ node /tmp/hello.js

另外,可以通过如下代码执行一个服务端,然后通过浏览器访问即可。

$ cat hello.js
var http = require("http");
http.createServer(function(request, response) {
    response.writeHead(200, {
        "Content-Type" : "text/plain" // 输出类型
    });
    response.write("Hello World");    // 页面输出
    response.end();
}).listen(8100);                      // 监听端口号
console.log("nodejs start listen 8100 port!");

$ node hello.js

然后,通过浏览器访问 http://localhost:8100 即可。

NPM

NPM 是 Node 的模块管理和发布工具,类似于 Python 的 setuptools,一些常见的工具,例如 nodejs、grunt、bower 等工具都是通过 NPM 发布的。

详细可以查看官网 www.npmjs.com,也可以从 npm.taobao.org 上下载最新安装包,不过上述的 NodeJS 已经安装了 NPM 工具,所以,这里直接省略。

安装配置

使用默认的镜像源时,可能会导致不稳定,可以通过如下两种方式指定源,如下是淘宝的。

----- 1. 临时指定镜像源
$ npm install --registry http://registry.npm.taobao.org express

----- 2. 永久设置
$ npm config set registry http://registry.npm.taobao.org

NPM 安装分为本地安装和全局安装两种,区别在于是否使用 -g 参数。

# npm install -g grunt-cli        ← 全局安装客户端
$ npm install grunt               ← 安装本项目的目录下
$ npm install grunt --save        ← 安装本项目的目录下,同时保存在package文件中
$ npm install grunt --save-dev    ← 安装本项目的目录下,同时保存在package文件中

$ npm config set prefix "PATH"    ← 设置全局路径
$ npm config get prefix           ← 获取当前设置的目录

全局会安装到 /usr/lib/node_modules 目录下,本地则会安装到 node_modules 目录下。

常用命令

$ npm ls --depth 0         当前项目的依赖模块
$ npm ls -g --depth 0      全局模块

$ npm uninstall -g <package>   删除全局包

package.json

包的定义和 NPM 都围绕着 package.json 文件做文章,用于存放模块的名称、版本、作者、模块入口、依赖项等信息,可以通过 npm help json 查看帮助文档,详细可查看 docs.npmjs.com

可以通过 npm init 交互式初始化项目,会生成一个 package.json 文件,一个 node package 有两种依赖,分别是:A) dependencies,是正常运行该包时所需要的依赖项;B) devDependencies,开发的时候需要的依赖项,像一些进行单元测试之类的包。

{
    "name": "foobar-demo",   # 模块名称
    "version": "1.0.0",      # 版本号,通常是Major.Minor.Patch
    "description": "Hello World",

    "scripts": {
        "product": "webpack",
        "dev": "webpack"
    },

    "dependencies": {
        "jquery": "^3.1.0"
    },
    "devDependencies": {
        "clean-webpack-plugin": "^0.1.10",
        "copy-webpack-plugin": "^3.0.1",
        "css-loader": "^0.23.1",
        "extract-text-webpack-plugin": "^1.0.1",
        "less": "^2.7.1",
        "less-loader": "^2.2.3",
        "style-loader": "^0.13.1",
        "webpack": "^1.13.1",
        "webpack-merge": "^0.14.1"
    }
}

在定义版本号的时候,有如下的匹配方式:

1.1.1        精确下载安装1.1.1版本的包
>,=1.1.1     大于、小于等于、大于等于1.1.1版本的包
1.0.1-1.1.1  版本范围是包含1.0.1到1.1.1版本的包
~1.1.1       尽量采用靠近1.1.1版本的包,可用版本1.1.1-0到1.1.x-x
~1.1         下载安装1.1.x-x版本的包
~1           下载安装1.x.x-x版本的包

依赖

可以通过如下方式分别安装。

$ npm install --production
$ npm install --dev


如果喜欢这里的文章,而且又不差钱的话,欢迎打赏个早餐 ^_^