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

悠悠 2022-11-25 10:23 314阅读 0赞

# 传统前端 #

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

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

这时候前端在WEB项目中，并不涉及太多的业务逻辑，通常代码最后要交给后端来实现与服务器的交互，前端的岗位在项目中一般是面目模糊的，甚至一个前端会同时跟几个项目，在项目组中不被重视，后端往往觉得前端只是项目的附属品，干着简单又费时费力的工作。  
[新手理解HTML、CSS、javascript之间的关系][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盘根目录,可以在命令行窗口运行这个代码  
![在这里插入图片描述][20200809125913578.png]  
服务器可以监听客户端的请求，类似于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中，在命令行窗口运行，效果见下图  
![在这里插入图片描述][20200809131734267.png]  
在浏览器中输入提示的网站，页面将会打印出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][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可以跳过选择，快速生成  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]

**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  
    ![在这里插入图片描述][20200810094844866.png]
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的安装目录中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]

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

*  npm config list 显示所有配置设置
 *  npm config set <key> <value> 将配置键设置为值，如由于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 <key> 查看某配置项，如：
    
        npm config get registry
 *  npm config edit 直接修改配置文件
 *  npm config delete <key> 删除某配置项

##### 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` 搜索软件包

[HTML_CSS_javascript]: https://blog.csdn.net/dreamingbaobei3/article/details/87860356
[20200809125913578.png]: /images/20221124/2043e08af1624f49acfcc605a8552084.png
[20200809131734267.png]: /images/20221124/4498b135c3884b93a40c8dc8a75f5193.png
[http_npmjs.org]: http://npmjs.org
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: /images/20221124/1eac81d11d0a4403a42fa0b374a8a12c.png
[20200810094844866.png]: /images/20221124/515c17fd25bc469fadfa33713987f44c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]: /images/20221124/88dea49ed261469e96f318901f3078fa.png