likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 29

环境准备

Node

当前前端时代,<font style="color:cornflowerblue">Node.JS</font>已是前端开发必备依赖,安装环境时往往第一个就是<font style="color:cornflowerblue">Node.JS</font>,那么我们也从<font style="color:cornflowerblue">Node.JS</font>开始

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

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

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

NVM

安装<font style="color:cornflowerblue">Node.JS</font>还有一个更好的方案:NVM工具。

<font style="color:cornflowerblue">NVM</font>是一个<font style="color:cornflowerblue">Node.JS</font>版本管理工具,允许同时存在多个Node版本,并能够轻易进行切换。

使用<font style="color:cornflowerblue">NVM</font>能够很好的解决某些项目针对指定Node版本的情况

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

<font style="color:cornflowerblue">NVM</font>安装和使用就不在此进行赘述,网上具有好多这样的文章,都很详细。其用法也就是nvm installnvm usenvm ls 这些命令。

NPM

<font style="color:cornflowerblue">NPM</font>是<font style="color:cornflowerblue">Node.JS</font>下的一个库管理工具。

安装<font style="color:cornflowerblue">Node.JS</font>时会默认安装<font style="color:cornflowerblue">NPM</font>

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

<font style="color:cornflowerblue">NPM</font>默认是从公共仓库获取库,有的公司还会搭建私有仓库。

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

使用<font style="color:cornflowerblue">NPM</font>时一般都需要配置国内镜像源,毕竟国外网速是个问题,配置镜像源网速也具有许多的文章,在此就不详细展开

Yarn

有许多人使用<font style="color:cornflowerblue">Yarn</font>进行库管理(本人也是),Yarn官方介绍说<font style="color:cornflowerblue">Yarn</font>具有速度快、可靠等优点。

一开始的确如此, 不过在<font style="color:cornflowerblue">Yarn</font>诞生后,<font style="color:cornflowerblue">NPM</font>也紧跟其后进行了优化,现在两者差别不大了,至于使用哪个取决于个人喜好,有兴趣的朋友可以参考npm 和 yarn 你选哪个?

日常使用也只不过命令语法上的差别差别:npm installyarn add

<font style="color:cornflowerblue">Yarn</font>官方下载安装程序页面404了,下载可以去GitHub

在此使用<font style="color:cornflowerblue">Yarn</font>

package.json

package.json文件是什么

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

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

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

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

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

package.json中基本信息是在项目发布为公共库时使用。例如 name代表当前<font style="color:cornflowerblue">NPM</font>库的名称。 main代表当前<font style="color:cornflowerblue">NPM</font>的根文件

项目初始化完毕后,<font style="color:cornflowerblue">Node</font>会将当前 package.json 文件所在的目录默认为一个<font style="color:cornflowerblue">模块(Module)</font> 也就是一个项目

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

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

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

添加依赖包

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

生产环境依赖就是代码在运行时使用到的依赖。例如<font style="color:#f03d3d">jquery</font>、<font style="color:#f03d3d">vue</font>等,是在实际代码使用到的。

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

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

其中 -D 表示开发环境依赖。默认则添加到生成环境依赖,例如添加<font style="color:#f03d3d">jquery</font>和<font style="color:#f03d3d">webpack</font>。 其中JQuery为生成环境依赖,而<font style="color:cornflowerblue">webpack</font>则是开发环境依赖

yarn add -D webpack@5.24.0

yarn add jquery@3.5.1

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

生产环境依赖开发环境依赖 的安装区分其实对于内部项目无所谓,只有针对 要发布到<font style="color:cornflowerblue">NPM</font>供别人使用时才体现的出来,

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

<font style="color:#f03d3d">jquery</font>有的会安装在peerDependencies属性中,这个属性是通用包引用的概念,具体请参考:一文搞懂peerDependencies

<font style="color:cornflowerblue">NPM</font>包版本具有^~*等符号,这些符号代表匹配最新的版本,具体请参考:NPM依赖包版本号~和^和的区别

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

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

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

scripts

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

使用<font style="color:cornflowerblue">webpack</font>时 执行的yarn startyarn build命令,就是设置 scripts 属性中的。

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

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

其它

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

总结

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

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

本文参考

本文依赖

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"
  }
}
转载自:https://segmentfault.com/a/1190000039363225
评论
请登录