Node.js学习笔记【part1】服务端应用开发、包管理、Babel转码器

Node.js学习笔记

浏览器的内核包括两部分核心：DOM渲染引擎、JavaScript解析引擎。脱离浏览器环境也可以运行JavaScript，只要有JavaScript引擎就可以。

Node.js是一个基于Chrome V8引擎的JavaScript运行环境。Node.js内置了Chrome的V8 引擎，可以在Node.js环境中直接运行JavaScript程序。Node.js没有浏览器API，如document，window的等，但加了许多Node.js 专属API，例如文件系统、进程、http功能。

开发类似JavaWeb的简单的后端程序或部署一些高性能的服务，Node.js是一个非常好的选择。

1.用户体验适配器BFF

BFF层的作用是让前端有能力自由组装后台数据，减少大量的业务沟通成本，加快业务的迭代速度。

无论是数据聚合还是数据剪裁，这类程序的特点是不需要太强大的服务器运算能力，但是对程序的灵活性有较高的要求，这两个特点都正好和Node.js的优势相吻合。

一个前端页面向 Service A、Service B 以及 Service C发送请求，不同的微服务返回的值用于渲染页面中不同的组件。此时，每次访问该页面都需要发送 3 个请求。我们需要一个服务来聚合Service A、Service B 以及 Service C响应的数据，这个服务层叫做BFF。

手机、平板端、PC机等用户终端都需要向每个Service，例如Service A发送请求。对于同一个功能，不同的终端需要的数据格式和内容会有不同。此时 Service A 的一个接口，不能同时满足三个客户端的不同需求。我们可以在Service A中开发三个接口，也可以增加一个数据裁剪服务，将数据按照不同终端的不同要求进行裁剪，这个服务层叫做BFF。

2.服务器端应用开发

第一步，创建server-app.js。

//引入http模块
const http = require('http');
//创建服务器
http.createServer(function (request, response) {
// 发送 HTTP 头部 
// HTTP 状态值: 200 : OK
// 内容类型: text/plain
response.writeHead(200, {'Content-Type': 'text/html'});
// 发送响应数据 "Hello World"
response.end('<h1>Hello Node.js Server</h1>'); //当所有要返回的内容发送完毕时，该函数必须被调用一次。
}).listen(8888); //监听8888端口
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

第二步，运行服务端程序。

node server-app.js

服务器启动成功后，在浏览器中输入：http://localhost:8888/ 可以查看到webserver成功运行，并输出html页面。停止服务在终端 ctrl + c 。

3.NPM包管理器

NPM全称Node Package Manager，是Node.js包管理工具，也是Node.js的包管理工具，相当于前端的Maven 。

#在命令提示符输入 node -v 可查看当前node.js版本
node-v
#在命令提示符输入 npm -v 可查看当前npm版本
npm-v

第一步，创建npm_pro文件夹，并进行项目初始化。

#建立一个空文件夹npm_pro，在命令提示符进入该文件夹  执行命令初始化
npm init
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改。

#如果想直接生成默认的 package.json 文件，那么可以使用命令
npm init -y

生成的package.json如下。

{
  "name": "npm_pro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

第二步，修改npm镜像。

NPM官方的管理的包都是从 http://npmjs.com下载的，但是这个网站在国内速度很慢。

这里推荐使用淘宝 NPM 镜像 http://npm.taobao.org/ ，淘宝 NPM 镜像是一个完整 npmjs.com 镜像，同步频率目前为 10分钟一次，以保证尽量与官方服务同步。

执行设置镜像地址指令：

#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org 
#查看npm配置信息
npm config list

4.npm install命令的使用

基本命令：

#使用 npm install 安装依赖包的最新版，
#模块安装的位置：项目目录\node_modules
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <dependencies>
#默认参数：--save  简写  -S  将当前依赖保存在dependencies节点下（即非全局，项目打包时不包含，仅在开发中使用）
npm install jquery

若要下载特定版本的依赖：

#如果安装时想指定特定的版本
npm install jquery@2.1.x

下载开发依赖：（项目打包时不包含，仅在开发中使用）

#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或简写
npm i -D eslint

下载全局依赖：（所有项目都会自动安装使用）

#全局安装
#Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install --global webpack
#或简写
npm install -g webpack

根据依赖下载安装包：

#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
npm install 
#可以实现项目传输或移植后，自动根据package.json中的配置下载依赖来初始化项目

其他命令：

#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名

5.ES6模块化规范

嵌入网页的Javascript代码越来越庞大，越来越复杂。Javascript模块化编程，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。模块化规范有CommonJS模块化规范（基于ES6语法之前）、ES6模块化规范（使用ES6语法）。

ES6使用 export 和 import 来导出、导入模块。第一步，创建 modularization_pro项目文件夹、创建 src，并执行npm init -y初始化项目。第二步，在src中创建两个js文件，一个定义两个方法，

//01.js
export default{  //export代表导出，可被其他js文件导入
  list() {
    console.log("list...")
  },
  save(){
    console.log("save...")
  }
}

一个调用其里面的两个方法，

//02.js
import user from './01.js'  //导入
//调用
user.list()
user.save()

此时会出现SyntaxError: Cannot use import statement outside a module错误。这是因为在node.js环境中无法直接执行ES6模块化的代码，需要ES6代码转换ES5才可以执行。

6.Babel转码器

ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。有了Babel转码器意味着，我们可以直接用 ES6 编写程序，而不用担心现有环境是否支持。

第一步，安装Babel。Babel提供babel-cli工具，用于命令行转码，它的安装命令如下：

npm install -g babel-cli
#查看是否安装成功
babel --version

第二步，新建并配置.babelrc。Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，presets字段设定转码规则。

{
"presets": ["es2015"],
"plugins": []
}

第三步，安装转码器。在目录中输入指令：

npm install -D babel-preset-es2015

第四步，转码。

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
babel src -d dist

01.js和02.js转码后生成的js文件如下。

//01.js
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = {
  list: function list() {
    console.log("list...");
  },
  save: function save() {
    console.log("save...");
  }
};

//02.js
'use strict';

var _ = require('./01.js');

var _2 = _interopRequireDefault(_);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

//导入
//调用
_2.default.list();
_2.default.save();

第五步，运行程序。此时运行dist中转码后的js文件即可成功运行以上的程序。

node dist/02.js

拓展方式：ES6模块化规范还有一些其他的语法格式，常见的另一种写法如下。

//01.js
export function getList() {
	console.log('获取数据列表')
}
export function save() {
	console.log('保存数据')
}

//02.js
import {getList, save} from"./01.js"
getList()
save()

7.Webpack打包js

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

第一步，全局安装。

#全局安装（任意一行即可）
npm install -g webpack webpack-cli
npm install -g webpack
npm install -g webpack-cli

#安装后查看版本号
webpack -v

第二步，创建webpack_pro文件夹并执行npm init -y初始化项目。新建src并载src下创建01.js和02.js，编写两个普通的函数。

//01.js
exports.info=function(str){
  document.write(str)
}

//02.js
exports.add=function(a,b){
  return a+b
}

第三步，在src创建main.js。main.js类似java中的主类main。

const a = require('./01.js') //ES5语法，require用于导入其他js文件
const b = require('./02.js')

a.info('hello'+b.add(3,2))

第四步，创建webpack配置文件。根目录下创建配置文件webpack.config.js，并粘入以下代码。

代码段功能为：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包。打包后的文件放入当前目录的dist文件夹下。打包后的js文件名为bundle.js。

const path=require("path") //Node.js内置模块
module.exports= {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
filename: 'bundle.js'//输出文件
    }
}

第五步，执行编译命令。执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码打包

webpack --mode=development
# 打包成功
#PS D:\workplace\codeplace\webpack_pro> webpack --mode=development
#asset bundle.js 2.88 KiB [emitted] (name: main)
#./src/main.js 136 bytes [built] [code generated]
#./src/01.js 53 bytes [built] [code generated]
#./src/02.js 43 bytes [built] [code generated]
#webpack 5.75.0 compiled successfully in 123 ms

第六步，webpack_pro目录下创建index.html，引用bundle.js进行测试。

<script src="dist/bundle.js"></script>

拓展：可以配置项目的npm运行命令，修改package.json文件。

"scripts": {
//...,
"dev": "webpack --mode=development",
"prod": "webpack --mode=production"
 }

运行时输入的npm命令就变为：

#开发打包
npm run dev 
#生产打包
npm run prod 

8.Webpack打包css

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。Loader 是模块和资源的转换器。

第一步，我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css。

npm install -D style-loader css-loader 

第二步，修改webpack.config.js。添加以下代码到module.exports结点中。

module: {
rules: [  
            {  
test: /\.css$/,    //打包规则应用到以css结尾的文件上
use: ['style-loader', 'css-loader']
            }  
        ]  
    }

修改后webpack.config.js如下：

const path=require("path") //Node.js内置模块
module.exports= {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
filename: 'bundle.js'//输出文件
    },
module: {
  rules: [  
              {  
  test: /\.css$/,    //打包规则应用到以css结尾的文件上
  use: ['style-loader', 'css-loader']
              }  
          ]  
      }
}

第三步， 在src中创建style.css。

body{
  background-color: pink;
}

第四步，修改main.js

require('./style.css')

第五步，运行编译命令执行打包。

#webpack --mode=development
npm run dev

第六步，浏览器中查看index.html，若背景颜色为pink，则说明css成功打包。