node.js 基础梳理

安装

1.下载

• 中文网址（快）: http://nodejs.cn/download/
• 英文网址（慢）：https://nodejs.org/zh-cn/download/

说明

• 推荐使用 LTS (long term support) 长期支持版本。
• 安装时，一路 next 即可安装完成。同时 npm 也会一同安装。
• npm 是 node 的包管理工具，用来下载、安装在 node 环境下运行的软件包。

2.配置镜像

由于国外服务器不方便访问，设置镜像后就可以从国内服务器下载软件包。

# 设置以后下载时,即可自动从淘宝镜像下载
npm config set registry http://registry.npm.taobao.org

特殊情况, 切换回原有地址：

npm config set registry https://registry.npmjs.org

查看当前的镜像地址设置：

npm config get registry

3.使用 npm 下载软件包

使用 npm 可以下载安装 node 环境下运行的软件包，通过npm 下载的软件包会存储在 node_modules 目录当中。例：

npm i xxx -D   # 安装一个叫 xxx 的软件包

常见参数：
# i 是 install 的简写 
# -D 把下载的软件包视为开发依赖, 记在package.json的devDependencies(开发时才使用的)
# -S 把下载的软件包视为生产依赖, 记在package.json的dependencies(写完项目后,代码执行时要用的, 默认)
# -g 全局安装(安装在系统上npm的一个总的目录中), 不加会默认安装在当前目录的 node_modules 

4.安装 cnpm

当配置淘宝镜像也无法下载软件包时, cnpm 有奇效~ 所以建议先安装, 备用。

# 通过 npm 安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

5.一些其它命令

npm  root  -g   # 全局模块目录  一般为 C:\Users\Administrator\AppData\Roaming\npm\node_modules
npm  bin   -g   # 全局命令目录  一般为 C:\Users\Administrator\AppData\Roaming\npm

# 缓存清理  直接删除 node_modules 也还是可能有缓存
npm   cache  clean  --force

# 查看 .npmrc 文件内容
npm config ls -l   # 其中包含 .npmrc 文件位置
npm config ls      # 查看主要内容

# 直接编辑 .npmrc 文件
npm config edit

使用

执行简单的 JS 文件

node xxx.js

包文件的执行

# 创建工作目录，并进入
mkdir mytest
cd mytest

# 生成 package.json
npm init -y

# 安装一个测试包 xxx 
npm i xxx -D

1.使用 npx 执行

npx xxx  

• npx 将尝试查找 node_modules / xxx 中的可执行文件
• 如果当前目录没有 node_modules , 它会继续向上查找, 直到磁盘根目录

2.通过在 package.json 中添加脚本命令执行

编辑 package.json ，以键值对的方式进行修改。

"scripts": {
  "xxx": "xxx"
},

在命令行执行

npm  run  xxx

此方法为常见套路

3.依然使用 node 执行. ( 不推荐 )

c:\mytest> node ./node_modules/h2otest/bin/index.js

正因为这样比较麻烦, 才有上面两种执行方法。

使用 nodemon

nodemon 可以监视文件修改. 被它监视的文件，修改保存后，就会被执行一次。

安装

# 创建项目目录
mkdir mytest

# 进入目录
cd mytest

# 初始化。生成 package.json
npm init -y

# 全局安装 nodemon 包
npm i nodemon -g

使用

# 通过 npx 运行 nodemon, 监视 abcd.js 的改变   ctrl + c 结束
npx nodemon abcd.js

使用 webpack-dev-server

( 此方法略复杂. 可以尝试. 也可以用上面的 nodemon~ )

要安装 4 个东东:

• webpack-dev-server 让代码以服务器为环境运行,调试
• webpack 做为代码打包编译的核心, 也是webpack-dev-server 的基础, 必须安装
• webpack-cli 用来分析我们敲出来的 webpack 相关命令, 必须安装
• html-webpack-plugin 它可以帮助我们自动生成一个 index.html 文件

安装

# 创建目录,进入目录
mkdir mytest
cd mytest
npm init -y

# 同时安装多个软件包 这里安装的都是相对新的版本
npm i webpack webpack-cli webpack-dev-server -D 

# 安装下面插件, 自动生成一个index.html文件
npm i html-webpack-plugin -D

配置

创建 webpack.config.js 默认的配置文件名

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  mode: 'none',
  stats: 'none',
  devtool: 'source-map',
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

使用

1.编写一个学习文件 xxx.js

console.log('hi，trump')

2.运行观察

# 在浏览器中打开html页面, 其中引入了编译之后.js文件
npx webpack serve --entry ./xxx.js --open