环境准备

Node

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

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

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

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

NVM

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

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

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

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

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

NPM

NPMNode.JS下的一个库管理工具。

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

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

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

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

Yarn

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

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

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

package.json

package.json文件是什么

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

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

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

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

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

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

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

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

添加依赖包

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

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

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

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

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

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

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

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

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

  • node_modules 当前项目依赖库存放目录
  • yarn.lock 当前项目已安装的每个依赖库的确切版本的信息以及代码的校验和以确保代码完全相同。
从零学脚手架(一)---环境介绍-LMLPHP

scripts

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

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

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

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

其它

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

总结

如果此篇对您有所帮助,在此求一个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"
  }
}
03-08 18:30