Node&工程化Node node是什么 Node.js 是一个开源和跨平台的 JavaScript 运行时环境。它几

Node

node是什么

Node.js 是一个开源和跨平台的 JavaScript 运行时环境。它几乎是任何类型项目的流行工具！
Node.js 在浏览器之外运行 V8 JavaScript 引擎（Google Chrome 的内核）。这使得 Node.js 的性能非常好。

node可以做什么

跨平台开发： PC web h5 rn weex
后端开发： express koa 、 BFF 、 Gateway
前端开发：
工具开发：脚本，脚手架，命令行。

一些基于node开发的工具

压缩： uglifyjs
依赖： Npm pnpm yarn bower
模块： cjs
css： postcss, sass, scss, less
构建： gulp, grunt, webpack
模板： jade
跨端： electron, uniapp

简单讲，浏览器不支持的，都需要借助node。

前端为什么要学习node

学习node可以帮助我们更好的理解程序是怎么运行的。

包管理工具

node安装好之后，就会有自带的包管理工具-npm。
npm
1. npm是分散式管理，不同于其它语言中的包管理工具。因为每个文件夹下面都有npm包
2. npm init，把一个文件夹变成一个工程。执行完命令后，文件夹下面就有一个package.json文件。
其它常用的包管理工具：yarn（也需要通过npm来安装）。
yarn和npm都可以切换任意一种镜像
切换镜像的方法，以淘宝镜像为例：
1. 手动切换镜像：npm config set registry registry.npm.taobao.or
2. 全局安装cnpm，安装的时候指定镜像源为淘宝镜像。完成后即可用cnpm代替npm命令进行包管理。
3. npm i 是很危险的操作
4. --save，到dependencies，项目中用到的需要用-save、-D到devdependencies，实际代码中用不到的，即运行时环境用不到的，比如webpack、jest、rollup。
好用的工具：
1. nvm：快速切换node版本。nvm的安装稍复杂。切换版本的前提是已经安装好了对应版本
2. nrm：可以切换 npm 连接的服务器，即切换npm的镜像源。常用的镜像：npm默认镜像、yarn镜像、tencent镜像、taobao镜像、cnpm、npmMirror
3. 简单说，nrm是npm config set registry https://....的平替。他们两者是等价的。nrm相当于对这行命令进行了封装，让我们可以快速切换镜像。当然nrm是需要先通过npm进行下载安装的。
4. pnpm是npm和yarn的结合体。
5. 想要通过yarn执行命令的话，需要先安装yarn（一般是全局安装），全局指的是在node.js整个目录下安装，安装完之后并不会出现在项目的package.json文件中。

常用的node命令

执行node命令：node ./src/index.js
__dirname，当前文件路径
process.pwd()，当前命令的运行目录
path.resolve(__dirname, '../package.json')，获取文件的绝对路径
require('fs')、require('path')
Buffer.from('麓一')，生成buffer
Buffer.from('麓一').toString()，buffer转字符串
fs.readFileSync('')，//异步读取文件
fs.readFile('')，//同步读取文件
fs.writeFile()，生成一个文件
fs.readFileSync(filePath, { encoding: 'utf-8'})，以utf-8格式读取文件
require('event')

node 和浏览器的区别

node 环境中，是没有 dom, bom ，同样的，浏览器也不支持 fs, path 这些模块

node的问题

单线程，很脆弱。所以说，我们可以使用 cluster / pm2 这样的一些库。
pm2 是最多人使用的用来管理服务器上 node.js 应用进程的库之一。

PS

浏览器至少有2部分，渲染引擎（负责渲染）和js引擎（负责解析js）
常见的js引擎：chrome-v8、firefox-spydermonkey、safari-jscore
爬虫：使用相关的库向浏览器发起请求，把请求到的东西抓下来。但是使用要谨慎，导致对方服务器宕机，会被起诉。
deno、bun还不成熟
一台服务的进程数，最高和CPU核数相等
部署项目是运营做的，cicd
异步方法才会有回调函数这个概念
进程间通信需要使用postMessage
事件循环，和 V8 其实关系不大，宿主环境的事情。
镜像服务器： npm的问题：npm的结点在国外，下载的速度可能会比较慢。所以我们希望有一个镜像服务器，镜像服务器即在中国建立一个服务器，它将国外服务器的内容都下载到中国的服务器上，这样我们就可以直接访问镜像服务器，速度会比较快。

工程化

1. 什么是工程化

形成标准。作为工程师，从代码层面上讲，需要从规范、性能、组织、层级、耦合、构建、产物上多方面考虑。在当下，工程化中最具代表力的一些产品。 - 构建产品。

2. webpack

什么是webpack

整合资源，帮我们打包出我们想要的最终产物。

具体：一个网页，最终需要构建的产物：html、js文件、css文件。但是写代码的时候可能不是这样写的，比如.vue文件中的html是包裹在template中、css可能使用了sass。而webpack是帮我们构建出我们想要的最终产物。

webpack是本身这么强大吗

并不是webpack本身提供了解析各种语法、模块的能力，因为webpack是典型的微内核架构。微内核架构？优点是高生长性。

3. 其它的构建工具

rollup
vite

如何看项目中使用的是什么构建工具？去看package.json文件中使用的构建命令。

用webpack搭建vue环境

npm init 初始化一个项目目录，将项目变成一个工程。
安装webpack、webpack-cli
配置webpack
1. 项目根目录下新建一个build/webpack.base.js文件。这个文件默认导出一个对象。
2. 添加html：执行构建命令后，会自动把生成的js文件引入到我们使用的html模板中。
  1. 先安装插件：yarn add html-webpack-plugin -D
  2. 引入html-webpack-plugin
  3. 在项目根目录下新建一个html模板，/public/index.html
  4. 执行构建命令，构建成功后，dist目录下会有一个html文件和js文件，并且在htmk文件中会自动帮我们引入js文件。
  5. 设置publicPath（可选），意味着如何去寻找打包出来的js这些资源的路径。尤其是在做微前端的时候，会用到这个字段。
3. 添加一些loader（比如处理css文件）
  1. 先安装对应loader，比如：yarn add css-loader style-loader -D
  2. 配置loader：loader的配置是一个module数组
  3. 为什么要添加loder？在实际开发过程中，webpack默认只能打包处理以.js后缀结尾的模块。其他非.js后缀结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错。
4. 处理静态图片资源
  1. 在 webpack 之前的版本里，我们可能要依赖 file-loader, url-loader，但是现在已经不需要了，可以直接处理静态图片资源。直接写rule即可。
5. 使用babel-loader，用于解析js文件
  1. 配置规则
  2. 需要新建一个.babelrc文件。可以在项目的任何地方。
  3. 安装babel：yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
  4. babel.config.js相当于项目的配置，是全局的，babelrc是局部的配置。
6. 搭建vue环境
  1. yarn add vue@^2.7.13
  2. yarn add vue-loader@15.9.8，注意vue-loader和vue的版本必须要相匹配
  3. yarn add vue-router@3.5.3
  4. 开始把项目配置成vue环境 1.在webpack.base.js文件中引入vueLoaderPlugin 2.在webpack.base.js文件中配置rule 3.在webpack.base.js文件中加resolve配置，用来给路径起别名。
    4.开始配置vue
```
main.js
import './assets/style.css'
import App from './App.vue';
import router from './router';
import Vue from 'vue';

new Vue({
    router,
    render:(h)=>h(App),
}).$mount('#app')
```
```
router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

Vue.use(VueRouter);

// const Home = () => import('@/views/Home.vue');
// const About = () => import('@/views/About.vue');

const routes = [
    {path:'/',component:Home},
    {path:'/about',component:About}
]

const router = new VueRouter({
    routes
})

export default router;
```
    App.vue
```
 </script>
 <style scoped>

 </style>
```

----- webpack.base.js ----- 文件至此基本配置完成

----- webpack.dev.js ------

webpack.dev.js文件，可以使用merge命令把base.js文件直接拿过来，另外还可以重写配置。
yarn add webpack-dev-server webpack-merge -D

PS

可以在js文件里面引入css文件，那么引用js文件的html就可以应用css样式。
react是一个运行时框架，不同于vue。所以用webpack构建vue环境时，要想解析所有的.vue文件，必须要安装vue-loader。

Node&工程化