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

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/254...
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": "bin/gws.js" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "https://gitee.com/ymcdhr/e-demo/tree/master/gulp-workflow-sample" }, "keywords": [ "tny" ], // npm install xxx --save // 生产依赖 // 1、别的项目如果依赖此项目也会自动安装 // 2、通常在项目代码中引入使用，会打包到生产代码中 "dependencies": { "bootstrap": "4.4.1", "jquery": "3.4.1", "popper.js": "1.16.1" }, // npm install xxx --save-dev // 开发依赖 // 1、别的项目如果依赖此项目不会安装 // 2、通常在构建工具代码中使用，不会打包到生产代码中 "devDependencies": { "gulp": "^4.0.2" }, "author": "Tony Young", "license": "MIT" }

2.4 package.json文件中配置项目入口如果把当前项目作为依赖使用，默认从package.json的入口去查找执行文件；

Web应用入口：main
NodeJS Cli应用入口：bin

bin执行文件后缀为js，但是文件首行要添加代码：#!/usr/bin/env node
如果是 Linux 或者 macOS 系统下还需要修改此文件的读写权限为 755

"main": "lib/index.js", //web 页面入口 "bin": {//nodejs cli 应用入口 "gws": "bin/gws.js" },

//gws.js #!/usr/bin/env node// 如果是 Linux 或者 macOS 系统下还需要修改此文件的读写权限为 755 // 具体就是通过 chmod 755 gws.js 实现修改

2.5 package.json文件中scripts的作用是什么？（npm scripts）在package.json中，配置"scripts"命令能够实现自动化构建；例如：

在命令行中执行：npm run build 就相当于在命令行执行：npx sass scss/main.scss css/style.css --watch
npm scripts配置的命令可以组合执行；

"scripts": { "build": "sass scss/main.scss css/style.css --watch",// npm run build 启动编译css "serve": "browser-sync . --files \"css/*.css\"",// npm run serve 启动web服务 "start": "npm run build&& npm run serve"// npm run start 同时执行build、serve两个命令 },

2.6 package.json文件中dependencies和devDependencies有什么区别？

安装命令：

> npm install xxx --save > npm install xxx --save-dev

参数说明
--save：将保存配置信息到pacjage.json的dependencies节点中。
--save-dev：将保存配置信息到pacjage.json的devDependencies节点中。
项目依赖：dependencies
1、别的项目如果依赖此项目也会自动安装（注意：dependencies中的依赖也可以配置成git仓库的地址，但是此仓库中一定要写好准确的入口文件；而且还需要配置git仓库的访问权限，如用户名密码。）
2、通常在项目代码中引入使用，会打包到生产代码中

"devDependencies": { "repo": "git+ssh://git@github.com:user/repo.git#master" },

开发依赖：devDependencies
1、别的项目如果依赖此项目不会自动安装
2、通常在构建工具代码中使用，不会打包到生产代码中

2.7 项目中加载依赖的几种方式

有些库可以在script标签中直接加载，例如：jQuery

有些库需要在项目中安装，然后在源码中引入（不同的规范加载方式不同，常用的规范有：ESModules、CommonJS、AMD等）；例如：安装webpack，并在代码中加载webpack模块。

安装webpack：

> npm install webpack webpack-cli --save-dev

package.json：

"devDependencies": { "webpack": "^5.38.1", "webpack-cli": "^4.7.0", },

代码中加载模块：

// CommonJS 规范的方式加载 const webpack = require('webpack')

2.8 npm常用命令有哪些？

npm install name//安装模块 npm uninstall name //卸载模块 npm update name//更新模块 npm ls//查看安装的模块 npm init//在项目中引导创建一个package.json文件 npm help//查看某条命令的详细帮助 npm config//管理npm的配置路径 npm cache//管理模块的缓存 npm version//查看模块版本 npm publish//发布模块 npm link//将A目录关联到B目录，这样可以在B项目直接使用A模块

3、npm简易的自动化构建工作流 3.1 简易web服务器模块：browser-sync 启动测试web服务器，自动唤起浏览器；
【前端工程化1（小白应该知道的NodeJS、NPM、package.json、脚手架是什么（））】安装browser-sync

> npm install browser-sync --save

运行browser-sync

> browser-sync

预执行服务： preserve，在启动npm run server之前会预执行npm run preserve
并行执行：同时执行多个命令的工具：npm-run-all
安装npm-run-all

> npm install npm-run-all --save

运行npm-run-all，在scripts中同时执行build和serve

"start": "run-p build serve"

文件监听：
browser-sync参数--watch监听文件修改，css修改过后自动重新编译sass
browser-sync参数--file监听文件变化，browser-sync将修改过的文件自动同步到浏览器

// 结合webpack，dist目录文件变化自动刷新浏览器 "scripts": { "dev": "webpack --config webpack.dev.js --watch", "sync": "browser-sync dist --files '**/*'", "serve": "webpack serve --config webpack.serve.js", "build": "webpack --config webpack.prod.js" },

4、npm源加速方案 npm在安装模块的时候使用默认的官方源地址：https://www.npmjs.com/，但是这个地址在国内不一定稳定且速度慢。我们可以将npm源地址换成淘宝镜像地址：https://registry.npm.taobao.org。国内有的公司网络管控比较严格，也可以在公司内网搭建私有源；私有源从官方源拉取模块并缓存。
可以通过以下一系列手段，提升npm安装模块的速度：
4.1 设置 npm 镜像源

# 设置为国内镜像源 npm config set registry http://registry.npm.taobao.org# 查看当前镜像源 npm config get registry# 恢复原来镜像源 npm config set registry http://registry.npmjs.org

4.2 设置 .npmrc 文件

虽然已设置国内镜像源, 有时候 A 包中需要下载 B 包, 这时还可能到国外站点下载 B 包
.npmrc 文件可以提供「变量」设置某些包的下载地址也为国内镜像.

windows 系统：文件位置一般为 C:/Users/Administrator(当前用户名)/.npmrc
macOS 系统：文件位置一般为用户家目录，cd回车直接切到家目录，ls -al 查看
把下面常见包地址复制到 .npmrc 中，从而提高下载成功率

sharp_binary_host = https://npm.taobao.org/mirrors/sharp sharp_libvips_binary_host = https://npm.taobao.org/mirrors/sharp-libvips profiler_binary_host_mirror = https://npm.taobao.org/mirrors/node-inspector/ fse_binary_host_mirror = https://npm.taobao.org/mirrors/fsevents node_sqlite3_binary_host_mirror = https://npm.taobao.org/mirrors sqlite3_binary_host_mirror = https://npm.taobao.org/mirrors sqlite3_binary_site = https://npm.taobao.org/mirrors/sqlite3 sass_binary_site = https://npm.taobao.org/mirrors/node-sass electron_mirror = https://npm.taobao.org/mirrors/electron/ puppeteer_download_host = https://npm.taobao.org/mirrors chromedriver_cdnurl = https://npm.taobao.org/mirrors/chromedriver operadriver_cdnurl = https://npm.taobao.org/mirrors/operadriver phantomjs_cdnurl = https://npm.taobao.org/mirrors/phantomjs python_mirror = https://npm.taobao.org/mirrors/python registry = https://registry.npm.taobao.org/ disturl = https://npm.taobao.org/dist

4.3 设置 hosts 文件

有些包在国内镜像中没有及时更新, 或者根本没有.
国外站点下载不通畅多是因为在「域名 => IP」阶段受阻
我们的解决方案就是提前把「域名与IP的对应关系」准备好，放在本在 hosts 文件中

编辑 C:\Windows\System32\drivers\etc\hosts 文件（更新时间 2021-3-3 ）

# GitHub520 Host Start 185.199.108.154github.githubassets.com 140.82.113.21central.github.com 185.199.108.133desktop.githubusercontent.com 185.199.108.153assets-cdn.github.com 185.199.108.133camo.githubusercontent.com 185.199.108.133github.map.fastly.net 199.232.69.194github.global.ssl.fastly.net 140.82.113.3gist.github.com 185.199.108.153github.io 140.82.113.3github.com 140.82.112.5api.github.com 185.199.108.133raw.githubusercontent.com 185.199.108.133user-images.githubusercontent.com 185.199.108.133favicons.githubusercontent.com 185.199.108.133avatars5.githubusercontent.com 185.199.108.133avatars4.githubusercontent.com 185.199.108.133avatars3.githubusercontent.com 185.199.108.133avatars2.githubusercontent.com 185.199.108.133avatars1.githubusercontent.com 185.199.108.133avatars0.githubusercontent.com 185.199.108.133avatars.githubusercontent.com 140.82.114.9codeload.github.com 52.216.104.59github-cloud.s3.amazonaws.com 52.216.164.131github-com.s3.amazonaws.com 52.216.29.28github-production-release-asset-2e65be.s3.amazonaws.com 52.217.81.140github-production-user-asset-6210df.s3.amazonaws.com 52.217.80.164github-production-repository-file-5c1aeb.s3.amazonaws.com 185.199.108.153githubstatus.com 64.71.168.201github.community 185.199.108.133media.githubusercontent.com # Star me GitHub url: https://github.com/521xueweihan/GitHub520 # GitHub520 Host End

补充：里面内容不是百分百固定, 遇到报错提示某个域名连接失败, 就到 https://ip138.com/ 查找其相应的 IP 地址, 然后把 IP地址与域名的对应信息追加到上面 hosts 文件中。
以上内容不行, 也可以参考下面网址:
https://github.com/521xueweih...
4.4 为什么要配置它，有啥用？

正常访问 http://aaa.bbb.ccc/ 计算机要向 DNS 询问对应的 IP 地址，不告诉你，你就访问不了
在 hosts 中设置后
再次访问 http://aaa.bbb.ccc/ 计算机不问了，直接通过 IP 访问

有些时候之所以访问不了，就是 DNS 不告诉你
现在咱自己记着 IP, 跳过这一步，就能访问了
4.5 最后的办法

# 安装 cnpm , 之后使用 cnpm 下载安装包 npm install -g cnpm --registry=https://registry.npm.taobao.org

5、npm publish发布模块的相关问题当我们的工具模块或者Nodejs Cli应用写好之后，为了固化代码和方便不同的团队使用，可以将其发布到npm源上，然后通过npm install module-name --save-dev的方式使用。
5.1 npm模块如何发布？在项目目录的命令行执行：npm publish即可
5.2 npm模块发布到那儿？ 1、淘宝镜像源是只读的，publish发布不上去
2、可以发布到yarn的镜像源（和npm是同步的）,也可以发布到自己的镜像源