《uni-app》npm详解及在uni-app中对npm的支持

这是一个没有套路的前端博主，热衷各种前端技术栈，喜欢非正规的骚操作，经常想到哪就写到哪，如果有感兴趣的技术和前端效果可以留言～博主看到后会代替大家去踩坑的～
主页: oliver尹的主页
格言: 跌倒了爬起来就好～

一. 前言

首先，可能有小伙伴会问：为什么会有这一篇？因为之前已经有分享过如何在项目中引入package.json了，但是那是在 Web项目 以及 原生的微信小程序，由于我后续的几篇都是借助于 HBuilder 创建的项目，项目在构建完了之后并不能直接使用npm，因此，为了 更好的、进阶式的学习，特此花一点点时间来了解如何在 HBuilder 中使用npm这个前端最大的包管理工具；

二. 阅读对象与难度

本文难度属于：初级，通过本文你可以大致了解以下几个知识点：

• 什么是NPM，它是做什么的；
• uni-app中如何使用NPM这个包管理工具；
• 实际项目中如何通过npm安装uView这个UI库；

具体内容可以参考以下的 思维导图：

三. npm简介

老生常谈的基础问题，但还是有必要的说明一下的，首先，什么是npm？

npm，全称：Node Package Manager，它由 JavaScript 编写开发，是一个 node包管理工具，换个说法 npm实际是用在NodeJS上的包管理系统，这也就代表如果想使用npm，那么你的环境上或者说你的电脑上必须 安装NodeJS，这两者是绑定的，已经锁死了；

那这和我们前端开发有什么关系呢？关系当然很大，比如现在我们使用最多的 前端框架 Vue 和 React 的脚手架就是由NodeJS实现的，具体我们可以在npm的库里面搜一下这两者的脚手架：

• 这是Vue的脚手架：Vue-CLI
  

• React的脚手架：create-react-app
  

因此如果不装NodeJS，Vue 和 React 将无法使用，当然，也正因为 Vue 和 React 的脚手架就是由NodeJS实现的，因此在我们的项目中可以使用npm作为包管理系统～

四. package.json

4.1 简介

关于package.json，其实在之前的博文里 已经分享过了 ，有兴趣的小伙伴可以参考一下这两篇文章：

• 第一篇：《《微信小程序-进阶篇》package.json版本说明及各类版本符号详解（一）》
• 第二篇：《《微信小程序-进阶篇》package.json必须掌握的字段知识（二）》

这两篇中详细介绍了一些关于 package.json 的知识，虽然文字标题冠着微信小程序，但是 东西是相同的，因此，这边只进行简单的介绍～

简单的说，在早期的前端领域中其实没有组件化，模块化这种概念，直到nodejs中引入了模块，它认为 一个模块就是一个库或者一个框架（比如文件处理模块fs模块），当模块化出现之后，为了 管理这些模块，或者说 为了描述这个模块，package.json 应运而生，至于为什么它的格式是json，那是因为json格式 它在文本数据交换格式领域中有着绝对的统治地位，几乎所有的动态编程语言都支持json，或者说可以通过包来编译和解码json，下面这个就是一个正常的 package.json 中记录的具体内容;

{
  "name": "demo",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "serve": "npm run dev",
    "dev": "vite --open",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@types/axios": "^0.14.0",
    "axios": "^0.27.2",
  },
  "devDependencies": {
    "eslint": "^8.14.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.7.1",
    "typescript": "^4.5.4",
  }
}

另外，当npm安装好的依赖包会被放入一个叫做：node_modules 的文件夹，也就是说，这个文件夹内的每一个文件夹都是一个依赖，具体的 node_modules文件夹 如下所示：

反过来，如果一个用现代框架构建的项目，发现它并没有 node_modules 的文件夹，这也就代表当前这个项目还没有进行安装，需要执行命令

npm install

4.2 小结

简单的小结一下：package.json 就是npm的的配置文件，当我们使用npm下载包的时候，下载的包的信息会被同步记录在 package.json 文件中，具体的包会被存储在 node_modules 这个文件夹内，另外 node_modules 文件夹内的依赖包和在 package.json 中的记录值是一一对应的；
当然，package.json的作用远不止记录依赖包信息，它还有很多作用，具体可以查看4.1小结中提到的那两篇博文～

五. uni-app对npm的支持

5.1 说明

当然，uni-app不管是基于哪个的框架，它内部一定是有node.js的，否则它没有办法去实现框架层面的一些东西，只是说它略微有点差异，具体差异表现在和web项目相比或者说和vue-cli相比: vue-cli构建好项目框架后会自动在当前工程下生成一个 node_modules 文件夹以及其对应的package.json文件，而 uni-app则不会自动生成，演示图如下：

因此，如果想要在uni-app的项目中使用npm，首先要做的就是对项目进行npm相关的初始化～

5.2 初始化npm

初始化的过程其实也非常简单，一共两步，当然，初始化的前提是电脑必须安装nodeJS的环境，如果没有安装nodeJS，前往nodeJS官网，自行选择安装包进行下载，nodeJS官网地址如下：NodeJS官网地址，下载完后，进行双击安装即可，安装步骤还是非常傻瓜式的～
话说回来，初始化npm的过程一共分为两步：

• 第一步：cd到需要运行初始化命令的项目目录，我们需要在这个项目的根目录执行初始化命令；
• 第二步：执行初始化命令：npm init

第一步就不多说了，主要是第二步，当在控制台执行完

npm init

之后，它会在控制台让你输入一些选项，这些选项无非就是让你确认一下项目名、版本号等等，对于不确定的都可以不管，因为这些值都 可以在最终的package.json里进行修改，初始化时的示例图大致如下：

当初始化完成后，node会在当前路径下生成一个package.json文件，具体如示例图所示：

这个文件生成即代表npm初始化成功～

5.3 安装命令说明

既然package.json文件已经生成，那么即可开始安装第三方依赖包，不过在此之前，必须 先了解一下安装命令，在npm中安装命令如下：

npm install packageName --save

这是一段完成的npm安装命令，我们可以将 其分为4段，分别是：npm，install，packageName 和 --save，

• npm：代表 npm工具，也就是说接下来要执行的是属于npm的命令；
• install：代表 安装，这是一个属于npm的内置关键词；
• packageName：这是一个变量，代表 包名，具体示例如下

// 安装uView
npm install uView

// 安装lodash
npm install lodash

也就是说，想要安装哪个包，packageName就是这个包的官方名字；

• –save：代表 保存，被–save的包会被记录到 package.json 中的 dependencies属性 下（这个属性代表项目被打包时该属性下的所有依赖包要一同被打进项目包里）；

到这里，我们就知道了，如果我们要安装lodash这个工具库进我们项目，那么需要执行的命令就是

// 安装lodash
npm install lodash --save

5.4 安装uView-UI

以uView为例，如果要在我们的项目中安装uView这个UI库，那么我们需要执行的命令是：

npm install uview-ui --save

我们执行一下，得到一下结果：

看得出，uView已经如我们上面所述的那般被安装进了项目，并且 package.json 中的 dependencies属性 下也已经出现了uview-ui这个依赖包信息～
接着，我们引入试一下是否可以正常使用uView-ui，按照官网的指示，在项目 src目录 中的 main.js 中，引入并使用uView的JS库，注意这两行要放在import Vue之后：

// main.js
import uView from "uview-ui";
Vue.use(uView);

之后，在项目src目录的uni.scss中引入此文件

/* uni.scss */
@import 'uview-ui/theme.scss';

当最后，我们需要在 page.json 中配置 easycom组件模式：

// pages.json
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

当这几步配置完成后，可以在 HBuilder 中查看一下效果，以button为例

可以使用uView-ui的button，没有问题～

六. 小结

本文主要分享了关于npm的一些知识，我们知道 npm其实是nodeJS的一个衍生物，它的主要作用是为nodeJS进行依赖包的管理，为其记录管理信息的地方就是 package.json文件，这个文件中记录这整个项目关于第三方依赖包的信息，被安装的具体的依赖包文件则是会被放入一个名为 node_modules 的文件夹；
接着，我们了解uni-app也是对npm支持的，只是默认状态下它并没有初始化，因此如果想要在uni-app中使用node包，就必须先进行npm的初始化，初始化的步骤很简单，归根结底，就是一行命令：npm init；
最后，我们以uView-ui为例，尝试了在一个项目中进行安装uView-ui，并成功运行～