前端工程化1：小白应该知道的NodeJS、NPM、package.json、脚手架是什么？

前端工程化基础：NodeJS、NPM、package.json与脚手架解析

最新推荐文章于 2025-08-28 09:22:04 发布

原创

最新推荐文章于 2025-08-28 09:22:04 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #npm #node.js #webpack #前端

本文介绍了前端工程化的基础概念，包括JavaScript引擎、V8引擎、浏览器线程、NodeJS环境及其CLI应用。详细讲解了npm和package.json，探讨了npm源加速方案，并提到了自动化构建工具如Webpack和Grunt。此外，还讨论了脚手架如vue-cli和create-react-app的重要性。

1、一些基本概念

1.1 js引擎是什么？

js引擎在浏览器中用于执行js代码；
js引擎是单线程机制，js同步代码在引擎中按照顺序一步一步执行；

1.2 V8引擎是什么？

Webkit是最初苹果公司开源的一个浏览器引擎，Safari就是基于Webkit开发的。Webkit主要由两大功能，一个是渲染Html，另一个是解析JavaScript。后来谷歌公司在Webkit的基础上升级了JavaScript解析器，研发出来V8引擎。V8引擎就用到了Chrome、Android浏览器中，后来还用到NodeJs环境用于执行服务端程序。所以现在的Chrome是基于Webkit内核并采用V8引擎的浏览器。

V8采用了即时编译，所以能提高JavaScript运行的速度。
V8支持多系统、多平台，例如：Chrome浏览器、NodeJS、一些移动端浏览器都采用的是 V8 引擎。

1.3 浏览器有哪5大类线程？（3/4/5线程也称为Web API）：

虽然js引擎是单线程机制，但是浏览器是多进程和多线程机制（例如：一个tab页就是一个进程）；而浏览器有这5大类主要的线程：

js引擎线程 —— 用于执行js代码
浏览器GUI渲染线程 —— 用于渲染页面，和js引擎线程互斥
浏览器事件触发线程 —— 用于维护事件循环，处理事件等
浏览器定时器触发线程 —— 用于处理计时器倒计时，setTimeout/setInterval
浏览器http异步请求线程 —— 用于发起异步请求，ajax请求等

1.4 NodeJS环境是什么？

NodeJS环境是基于V8引擎开发的JavaScript运行环境，一般我们去官网下载安装包安装即可。官网：http://nodejs.cn/download/。

NodeJS环境用于运行服务端的JavaScript应用程序，诸如网络读取、访问数据库或文件系统等功能的程序。
NodeJS环境有一套完整的标准库来开发JavaScript应用程序，文档：http://nodejs.cn/api/。
NodeJS应用程序序擅长处理高并发的请求（因为js事件驱动的特性）。
NodeJS应用程序有这些常用的框架或者库：express、koa.js、egg.js、nest.js等。
NodeJS应用程序通常使用CommonJS作为模块化开发标准。

1.5 NodeJS Cli应用是什么？

NodeJS Cli应用是在NodeJS环境运行的命令行工具，例如在命令行执行的webpack-cli、vue-cli、create-react-app等工具。我们可以将常用的脚手架或其它功能的工具封装成NodeJS Cli应用，然后在命令行直接使用。

> webpack webpack.config.js --open

1.6 如何开发自己的NodeJS Cli应用？

参考项目实例：自定义实现Nodejs Cli工具

1.7 如何在命令行执行本地Nodejs Cli项目？

未发布时以项目源码形式存在，例如项目：my-nodejs-cli

进入本地nodejs cli项目目录，链接到全局：

> cd my-nodejs-cli
> npm link

在其他项目目录执行nodejs cli项目

> cd my-project
> my-nodejs-cli

1.8 脚手架是什么？

脚手架是一些工具，利用这些工具能够更好的实现前端工程化。项目开发中，开发者会遇到以下问题：

前端项目开发时，通常会有多人协同开发的情况；其中涉及到例如：开发规范、公用配置、模块化等问题。
前端项目上线前，还会有预编译、打包、自动化构建等工作需要处理；

1.9 常用的脚手架有哪些？

vue-cli —— 创建vue项目的工具
create-react-app —— 创建react项目的工具
Yeoman —— 用于创建自定义脚手架的工具
Plop —— 用于项目中，重复创建相同类型的项目文件（例如vue中某个组件的js、css文件）
Grunt —— 自动化构建工具
Gulp —— 自动化构建工具
Fis3 —— 自动化构建工具
Webpack —— 自动化打包构建，模块化开发工具

2、npm和package.json

2.1 npm是什么？

npm是随同NodeJS一起安装的包管理工具，它能够方便管理项目所需依赖。package.json作为项目的描述文件配合npm工具使用。

2.2 yarn和npm的区别？

yarn和npm功能基本一样；
yarn比npm快，命令更简洁；具体参考：https://www.jianshu.com/p/254794d5e741
npm最新版本速度也快，npm5.0之后yarn的优势不再明显

2.3 package.json是什么？

描述文件：package.json作为项目的描述文件配合npm工具使用，文件中通常记录了项目名称，项目版本，项目执行入口文件，项目贡献者等信息；
自动生成：在项目目录使用命令 npm init 对项目进行初始化。自动生成package.json。
npm install：执行命令 npm install 会安装package.json中描述的依赖，包括开发和生产等依赖。

// package.json 文件：
{
   
   
  "name": "gws",
  "version": "0.0.1",
  "description": "gulp 自动化工作流模块",
  "main": "lib/index.js", //默认入口
  "bin": {
   
                   //nodejs cli应用入口
    "gws"