从零学脚手架(一)---环境介绍

环境准备

Node

当前前端时代，Node.JS已是前端开发必备依赖，安装环境时往往第一个就是Node.JS，那么我们也从Node.JS开始

截至到编写本章时，Node.JS官网的LTS版本为 14.15.5 ，最新版本为 15.9.0

仅仅用于脚手架的话，并不需要特别新的Node版本，所以不用特别激进，使用最新的LTS版本即可。

NVM

安装Node.JS还有一个更好的方案：NVM工具。

NVM是一个Node.JS版本管理工具，允许同时存在多个Node版本，并能够轻易进行切换。

使用NVM能够很好的解决某些项目针对指定Node版本的情况

NVM安装和使用就不在此进行赘述，网上具有好多这样的文章，都很详细。其用法也就是nvm install、nvm use、nvm ls 这些命令。

NPM

NPM是Node.JS下的一个库管理工具。

安装Node.JS时会默认安装NPM

Node官方提供的一个公共仓库，里面具有海量的工具库。

NPM默认是从公共仓库获取库，有的公司还会搭建私有仓库。

个人学习都是使用公共仓库。

使用NPM时一般都需要配置国内镜像源，毕竟国外网速是个问题，配置镜像源网速也具有许多的文章，在此就不详细展开

Yarn

有许多人使用Yarn进行库管理（本人也是）,Yarn官方介绍说Yarn具有速度快、可靠等优点。

一开始的确如此，不过在Yarn诞生后，NPM也紧跟其后进行了优化，现在两者差别不大了，至于使用哪个取决于个人喜好，有兴趣的朋友可以参考npm 和 yarn 你选哪个？。

日常使用也只不过命令语法上的差别差别：npm install、yarn add

Yarn官方下载安装程序页面404了，下载可以去GitHub
在此使用Yarn

package.json

package.json文件是什么

package.json 文件是 项目配置文件 ，文件中具有当前项目的基本信息（项目名称、作者、版本等）、依赖库等信息。

使在用yarn init 命令时，会初始化一个项目

初始化项目时，填写当前项目基本信息，这些信息就是当前项目的描述。

项目初始化完成后会在当前目录下创建一个 package.json 配置文件： package.json 中就包含了初始化时的基本信息。

package.json中基本信息是在项目发布为公共库时使用。例如 name代表当前NPM库的名称。 main代表当前NPM的根文件

项目初始化完毕后，Node会将当前 package.json 文件所在的目录默认为一个模块（Module） 也就是一个项目

在此目录安装或卸载库都是对 package.json 文件的更新。

使用yarn install初始化项目时也是根据 package.json 文件依赖的库下载到本地(下载到 node_modules 目录)

项目引用的外部包存放在node_modules目录下，所以此目录会非常大，使用GIT项目管理时要进行忽略

添加依赖包

项目在使用外部库时会分为 生产环境依赖 和 开发环境依赖 ，在 package.json 中分别位于 dependencies 、 devDependencies 属性。

生产环境依赖就是代码在运行时使用到的依赖。例如jquery、vue等，是在实际代码使用到的。

而 开发环境依赖库 ，则是参与打包器等一系列的库，这种库在后面会详细讲解。

添加依赖包的命令为yarn add [-D] pack-name

其中 -D 表示开发环境依赖。默认则添加到生成环境依赖，例如添加jquery和webpack。其中JQuery为生成环境依赖，而webpack则是开发环境依赖

yarn add -D webpack@5.24.0
yarn add jquery@3.5.1

生产环境依赖 和 开发环境依赖 的安装区分其实对于内部项目无所谓，只有针对要发布到NPM供别人使用时才体现的出来，

不过为了规范，哪怕在内部项目，最好也按照依赖规范。具体请参考：通俗的告诉你，为什么是 devDependencies

jquery有的会安装在peerDependencies属性中，这个属性是通用包引用的概念，具体请参考：一文搞懂peerDependencies
NPM包版本具有^、~*等符号，这些符号代表匹配最新的版本，具体请参考：NPM依赖包版本号~和^和的区别

添加一个包后会在根目录中生成 node_modules 目录和 yarn.lock 文件，这两个文件都是根据依赖项自动管理。不需要手动更改。

node_modules 当前项目依赖库存放目录
yarn.lock 当前项目已安装的每个依赖库的确切版本的信息以及代码的校验和以确保代码完全相同。

scripts

package.json 文件具有一个 scripts 属性，这个属性代表执行命令属性。 key 为命令语句， value 为所执行的命令。

使用webpack时执行的yarn start、yarn build命令，就是设置 scripts 属性中的。

scripts的属性可以随意设置，例如可以使用start执行node，甚至可以执行其他一切可执行程序：打开计算器（calc）

其它

package.json 作为一个配置文件，允许设置项目中使用到的自定义属性，例如之后会用到的 babel 、 browserslist

总结

NVM为Node版本管理工具，使用它可以更好的管理Node环境
NPM为Node库管理工具
package.json 文件是Node项目配置文件，依赖项、基本信息、命令执行语句都存放于 package.json 文件

如果此篇对您有所帮助，在此求一个star。项目地址： OrcasTeam/my-cli

本文参考

npm 和 yarn 你选哪个？
nvm安装和使用
npm使用国内镜像的方法
通俗的告诉你，为什么是 devDependencies
NPM依赖包版本号~和^和*的区别

本文依赖

package.json

{
  "name": "my-cli",
  "version": "1.0.0",
  "main": "index.js",
  "author": "mowenjinzhao<yanzhangshuai@126.com>",
  "license": "MIT",
  "devDependencies": {
    "webpack": "5.24.0",
  },
  "dependencies": {
    "jquery": "3.5.1"
  },
  "scripts": {
    "start": "node",
    "calc": "calc"
  }
}

从零学脚手架(一)---环境介绍

环境准备

Node

NVM

NPM

Yarn

package.json

package.json文件是什么

添加依赖包

scripts

其它

总结

如果此篇对您有所帮助，在此求一个star。项目地址： OrcasTeam/my-cli

本文参考

本文依赖

package.json

莫问今朝

引用和评论

从零学脚手架(三)---webpack属性详解

Jerry和您聊聊Chrome开发者工具

一些react使用小技巧（中）

如何在仓库中添加只对自己生效的.gitignore规则？

面向企业级前端应用的开发框架 UI5 的发展简史介绍

真是惭愧，直到今天，我才搞懂桶排序算法

EventLoop事件循环机制(浏览器和Node EventLoop)