浅谈前端工程化（一）Nodejs和NPM

传统前端

在前面所有的文章中，我们都是在围绕网页的三部分，结构（HTML）、表现(CSS)、行为(JS)分离的方式来介绍的,传统的前端，就是在html文件中引入css文件和js文件（包含jQuery之类的js库），来实现网页的一部分，通常包括：

1. 页面的静态实现，即所谓的切图或者DIV+CSS页面实现
2. 使用js及其插件完成页面的动态效果
3. 表单提交、数据验证或使用ajax与后端交互数据

这时候前端在WEB项目中，并不涉及太多的业务逻辑，通常代码最后要交给后端来实现与服务器的交互，前端的岗位在项目中一般是面目模糊的，甚至一个前端会同时跟几个项目，在项目组中不被重视，后端往往觉得前端只是项目的附属品，干着简单又费时费力的工作。
新手理解HTML、CSS、javascript之间的关系

但随着web业务日益复杂化，一个Web项目不再是几个网页（WebPage）那么简单，而是一个运行在互联网上的复杂的Web应用（WebApp）了。一个复杂的Web应用，必然需要多人协作完成，前端专注于客户端，后端专注于服务端，前后端通过API交互；
对于负杂的业务，前端与前端的协作在传统时代是一个麻烦事，怎么提高工作效率、怎么维护代码、怎么提高代码质量、怎么迭代升级，传统时代一个前端宁可从头再来，也不愿接手别人的代码，可见这有多困难。

前端工程化

前端工程化指使用软件工程的技术和方法来进行前端项目的开发、维护和管理，前端工程化的引入，让前端开发能脱离对后端项目的依赖,看起来像一个独立的项目。这是一个很大的话题，并没有一个准确的定义。

如前面讲到的ES6的模块化，VUE中的组件，都是前端工程化的表现形式，实现前端工程化涉及到的技术很多。
如开发时要脱离后端，让项目跑起来，需要Nodejs,实现模块化管理和资源管理需要webpack,实现代码版本管理需要Git等等。

无论怎样，提到前端工程化首先要说一说Node.js

Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,是一个让 JavaScript 运行在服务端的开发平台。
在此之前JavaScript 的宿主环境只有浏览器，如下面的js代码,需要script标签，插入到HTML中才能被浏览器识别，并被其js引擎解释执行

console.log("Hello World");

安装Nodejs只需要根据自己的操作系统，到官网下载安装合适的版本即可，假设把Nodejs安装到了D盘根目录,可以在命令行窗口运行这个代码

服务器可以监听客户端的请求，类似于Apache、Nginx 等搭建HTTP 服务器

var http = require('http');
http.createServer(function (request, response) {
    response.writeHead(200, {'Content-Type': 'text/plain'});
    response.end('Hello World\n');
}).listen(8888);

console.log('Server running at http://127.0.0.1:8888/');

把上面面的代码保存到server.js中，在命令行窗口运行，效果见下图

在浏览器中输入提示的网站，页面将会打印出Hello World

说白了Nodejs是Javascript的另一个宿主环境，有了Node之后，js的地位从前端的脚本语言，变成了一门前后端通吃的语言，随着js的版本升级，js将会越来越重要，成为传统后端不得不正视的编程语言。

说到这里，大家可能会产生一个疑问，虽然js可以在服务端运行，但作为前端如果我们不做全栈，与我们又有什么关系呢？不可能我们掌握了js的语法规则就能成为全栈工程师吧？

这是因为我们虽然不做服务器端，但要实现前端工程化需要用到Nodejs的模块和包。

Node.js的模块与包

模块是Node.js 应用程序的基本组成部分，Node.js的模块系统很简单，和ES6模块化思路相同，每个 Node.js 文件都被视为一个独立的模块（包括JS文件，JSON文本文件，二进制模块文件）；
和ES6模块化不同的是，Nodejs采用CommonJS模块化规范，提供 exports 和 require 两个对象， exports 是向外公开模块的接口，require是从外部获取模块的接口。

包用于管理多个模块以及依赖关系，可以对多个模块进行封装，包可以理解为被封装了的模块，包的根目录必须包含package.json文件，package.json文件是CommonJS规范用于描述包的文件。

模块和包是没有本质区别的，两个概念也时常混用。

NPM

大名鼎鼎的NPM(Node Package Manager)是随同NodeJS一起安装的包管理工具，NPM本身也是Node.js的一个模块。
NPM的含义有两层,一个是NPM服务器，NPM服务器网址为http://npmjs.org，NPM是 Node 包的标准发布平台，用于 Node 包的发布、传播；
另一个是NPM命令npm CLI，指在命令行窗口或终端使用npm命令来管理node包（模块），开发者可以使用npm命令下载、安装、升级、删除包等。

npm init初始化一个包的package.json 文件

这个命令相当于在当前目录初始化一个node项目(一个node项目相当于一个node模块或者说node包)，运行后，会在当前目录下生成一个package.json文件，这个文件定义了该项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。
npm init -y可以跳过选择，快速生成

package.json 文件的部分配置项

• name：必须字段 项目/模块名称，长度必须小于等于214个字符，不能以"."(点)或者"_"(下划线)开头，不能包含大写字母
• version：必须字段 项目版本
• author：项目开发者，它的值是开发者在https://npmjs.org网站的账户名
• description和keywords
  description是项目描述，是一个字符串。它可以帮助人们在使用npm search时找到这个包；
  keywords是项目关键字，是一个字符串数组。它可以帮助人们在使用npm search时找到这个包。
  Description和Keywords是npm搜索系统中的搜索条件，如果试图发布这个项目，这两个字段可以帮助其他人进行搜索
• main：是这个项目的入口文件，如果没有设置，则默认加载项目跟目录下的 index.js 文件，如本例中，当别人安装了这个的模块后，通过 var X = require(‘demo’)取得的就是你在index.js的输出
• dependencies和devDependencies
  dependencies是在生产环境下，指示当前包所依赖的其他包;devDependencies是在开发环境下，指示当前包所依赖的其他包。
  与两个字段相关的npm install的命令：
  1、npm install 模块 --save 安装好后写入package.json的dependencies中（生产环境依赖）
  2、npm install 模块 --save-dev 安装好后写入package.json的devDepencies中（开发环境依赖）
• scripts：package.json文件里面，使用scripts字段自定义npm脚本命令，命令行下使用npm run XXX就可以执行这段脚本，如： “start”: “node server.js”, 执行 npm run start 就是运行 “node server.js”。
• Repository：用于指示代码存放的位置
• license：软件授权条款，值是开源许可证，让安装本模块的用户知道他们的使用权利和限制。

npm install 模块 安装一个依赖包 , 简写 npm i

直接使用 npm install xxx安装的模块是会自动写入 package.json 的依赖 (dependencies)，等同于 npm install xxx --save, 如果同时安装多个依赖包用空格隔开；
额外加个参数:

• –save，缩写为-S，表示安装的包将写入package.json里面的dependencies。
• –global，缩写为-g，全局安装一个包。安装之后的包将位于系统预设的目录之下。
• –save-dev，缩写为-D，表示将安装的包将写入packege.json里面devDependencies。

现在我们来新建一个项目，并且本地安装webpack

1. 在D盘，新建一个文件夹npm-demo
   
2. 初始化一个package.json文件，在命令行窗口执行npm init,完成后npm-demo目录下会生成package.json文件
3. 在命令行窗口执行 npm install webpack
   npm-demo目录下新增了一个node_modules文件夹，它是用来存放用NPM下载安装的包的文件夹；
   package.json文件中的dependencies配置项，已经写入了webpack依赖。
   实际上,因为webpack只在开发环境使用，只需把webpack安装为开发依赖，可以尝试卸载，再重新安装为开发依赖 npm install webpack --save-dev
   这时候package.json文件中会出现新的配置项devDependencies

   "devDependencies": {
     "webpack": "^4.44.1"
   }
   

生产依赖和开发依赖的区别

package.json文件中的配置项dependencies指示生产环境依赖的包
package.json文件中的配置项devDependencies指示开发环境依赖的包
生产环境依赖会在项目打包上线时被引入到项目中，而开发环境依赖在只在项目开发时被引入，如上面提到的webpack

全局安装和本地安装的区别

本地安装

1. 将安装包放在 ./node_modules 下（运行npm时所在的目录）
2. 可以通过 require() 来引入本地安装的包

全局安装

1. 将安装包放在系统预设的目录之下
2. 可以直接在命令行里使用

npm run 执行一个自定义脚本的命令

npm 可以在项目package.json里面自定义脚本命令,package.json文件中的字段script的每一个属性都是一个自定义的脚本命令。npm 的 scripts 有4个内置的缩写命令：
npm test 等价于 npm run test
npm start 等价于 npm run start
npm restart等价于 npm run restart
npm stop等价于 npm run stop

npm config 管理npm的配置文件

npm的配置文件是一个.npmrc文件，并不存放在nodejs的安装目录中

config命令主要包含增、删、改、查几个步骤，config支持以下子命令：

• npm config list 显示所有配置设置

• npm config set 将配置键设置为值，如由于npm服务器在国外，下载速度较慢，将仓库源设置为淘宝镜像

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

  在nodejs的安装目录D: \nodejs下，新建node_global和node_cache两个文件夹，设置node_global为全局模块存放路径,设置node_cache为缓存文件夹。

  npm config set prefix "D:\nodejs\node_global"
  npm config set cache "D:\nodejs\node_cache"
  

• npm config get 查看某配置项，如：

  npm config get registry 
  

• npm config edit 直接修改配置文件

• npm config delete 删除某配置项

5、其他常用命令

• npm --version查看npm 当前安装的版本 简写：npm -v
• npm uninstall 卸载当前目录下的某个包， 简写npm un
• npm update更新当前目录下的某个包
• npm docs xxx 查看某个包文档
• npm list 查看当前目录下安装的所有的包,npm list -g 查看全局安装包路径下的所有包
• npm --help 可查看所有命令 简写：npm -h
• npm help xxx 查看某条命令的详细帮助 ,如：npm help run
• npm view xxx version 查看当前包的版本信息,如：npm view webpack version
• npm search 搜索软件包