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

莫问今朝乄
544 阅读5分钟

环境准备

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默认是从公共仓库获取库，有的公司还会搭建私有仓库。

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

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

Yarn

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

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

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

:whale2::whale2: Yarn官方下载安装程序页面404了，下载可以去GitHub

:whale2: 在此使用Yarn

package.json

package.json文件是什么

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

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

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

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

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

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

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

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

:whale2::whale2: 项目引用的外部包存放在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

:whale2::whale2:

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

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

总结

:whale2::whale2::whale2:

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

本文参考

本文依赖

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"
  }
}
avatar
文章
阅读
粉丝