“npm&包的相关使用“

最新推荐文章于 2024-08-13 10:14:43 发布

PanCc220

最新推荐文章于 2024-08-13 10:14:43 发布

阅读量762

点赞数 1

分类专栏：前端文章标签： npm webpack 前端 node.js

本文链接：https://blog.csdn.net/qq_61324100/article/details/130714363

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章目录

什么是包?

Node.js中的第三方模块也叫做包。

为什么需要包?

由于Node.js的内置模块仅提供了一些底层的API,导致在基于内置模块进项项目开发时,效率低。

而包是基于内置模块封装出来的,提供了更高级、更方便的API,极大的提高了开发效率。

全球最大的包共享平台

https://www.npmjs.com/ (可在网站上搜索查找自己所需要的包)
https://registry.npmjs.org/ (服务器上下载自己需要的包))

1.npm的使用

在安装Node.js时,npm(包管理管理工具)会跟随着Node.js的安装包一同安装到本地上的。

1.查看包管理安装工具

npm -v

2.下载包

npm install 包名
npm i 包名
// 安装带版本的包
npm install 包名@版本号

3.包管理配置文件

初次装包完成后,项目文件夹下会有node_modules文件夹和package-lock.json配置文件。

node_modules：用来存放所有已安装到项目中的包。
package-lock.json: 记录node_modules文件夹下每一个包的下载信息(如包名、版本号、下载地址等)
在项目根目录中,必须提供一个package.json的包管理配置文件,用来记录与项目有关的一些配置。

多人协作问题:

第三方的包体积过大,不方便团队成员之间共享源代码。

解决方案: 提交项目到GitHub共享代码之前,剔除node_modules,我们可以将node_modules文件夹,添加到.gitignore忽略文件中。

4.快速创建package.json

npm -init -y

上述命令尽量使用英文名的文件夹

5.安装多个包

npm install 包名1 包名2

6.安装所有包

npm install

7.卸载包

npm uninstall 包名

8.dependencies&devDependencies

dependencies节点:专门用来记录使用npm install 命令安装了哪些包。
devDependencies节点:如果某些包只在开发阶段中用到,在项目上线时用不到,安装包时,记录这些包到此节点中

安装到devDependencies节点的包

npm install webpack -D
或
npm install webpack --save-dev

9.切换下载镜像源

(1)查看当前的下包镜像源

npm config get registry

(2)像源切换为淘宝镜像源

npm config set registry=https://registry.npm.taobao.org/

为了更方便的切换镜像源,可以安装nrm工具,利用nrm提供的终端命令,快速查看和切换镜像源

npm install nrm -g open@8.4.2 --save

查看所有可用的镜像源

nrm ls

镜像源切换成taobao镜像

nrm use taobao

2.包的分类&规范的包结构

包可分为项目包和全局包。

1.项目包

安装到项目的node_modules目录中的包,都是项目包,项目包又分为: 开发依赖包和核心依赖包。

dependencies节点下: 核心依赖包
devDependencies节点下: 开发依赖包

2.全局包

在执行npm install命令时,如果提供了-g参数,则会把包安装成全局包。

只有工具性的包,才有全局安装的必要,如nrm。

安装全局包

npm install 包名 -g

卸载全局包

npm uninstall 包名 -g

i5ting_toc工具包:

i5ting_toc是可以把md文档转换为html页面的小工具。使用步骤:

npm install i5ting_toc -g
i5ting_toc -f node.js简介.md -o

-o:表示转换完成后通过默认的浏览器打开

全局包默认安装到: C:\Users\Administrator\AppData\Roaming\npm\node_modules。

5.规范的包结构

包必须以单独的目录存在
包的顶级目录下必须包含package.json这个包管理配置文件
package.json中必须包含name,version,main这三个属性,分别代表: 包名、版本号,包的入口

包的应用

// 案例: 传统方式格式化时间
// 定义格式化时间函数
// 01_module.js
function getFormat(dtStr) {

    const dt = new Date(dtStr)
    const y = dt.getFullYear()
    const m = padZero(dt.getMonth() + 1)
    const d = padZero(dt.getDate())

    const hh = padZero(dt.getHours())
    const mm = padZero(dt.getMinutes())
    const ss = padZero(dt.getSeconds())

    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
// 定义补零函数
function padZero(n) {

    return n > 9 ? n : '0' + n
}

// 对外共享成员
module.exports = {
    getFormat
}

// test.js
const Time = require('01_module.js')

const date = new Date()
newTime = Time.getFormat(date)
console.log(newTime)

使用moment包格式化时间

// 1. 导入需要的包
const moment = require('moment')   
const dt = moment().format('YYYY-MM-DD hh:mm:ss')
console.log(dt)

moment(): 获取到当前时间
format(): 对时间格式化

3.包的发布

1.准备包

1.初始化包的基本结构

(1).新建pancc-tools文件夹,作为包的根目录

(2).在pancc-tools文件夹下,创建如下三个文件

package.json(包管理配置文件)
index.js(包的入口文件)
README.md(包的说明文档)

2.初始化package.json

{
    "name": "pancc-tools",
    "version": "1.0.0",
    "main": "index.js",
    "description": "提供了格式化时间的相关功能",
    "keywords": [
        "pancc",
        "dateFormat",
        "tools"
    ],
    "license": "ISC"
}

3.将不同的功能进行模块化的拆分

(1)将格式化时间的功能,拆分到src->dataFomat.js中

// 定义格式化时间函数
function dateFormat(dateStr) {

    const dt = new Date(dateStr)
    const y = dt.getFullYear()
    const m = padZero(dt.getMonth() + 1)
    const d = padZero(dt.getDate())

    const hh = padZero(dt.getHours())
    const mm = padZero(dt.getMinutes())
    const ss = padZero(dt.getSeconds())

    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}

// 时间补零函数
function padZero(n) {

    return n > 9 ? n : '0' + n
}

// 向外暴露成员
module.exports = {
    dateFormat
}

(2)将处理HTML字符串的功能,拆分到src->htmlEscape.js中

// 定义转义HTML字符的函数(为了防止用户将html标签写到表单)
function htmlEscape(htmlStr) {

    return htmlStr.replace(/<|>|"|&/g, match => {

        switch (match) {

            case '<':
                return '&lt;'

            case '>':
                return '&gt;'
            case '"':
                return '&quot;'
            case '&':
                return 'amp;'
        }
    })
}

// 定义还原HTML字符串的函数
function unHtmlEscape(htmlStr) {

    return htmlStr.replace(/&lt;|&gt;|&quot;|&amp;/g, match => {

        switch (match) {

            case '&lt;':
                return '<'
            case '&gt;':
                return '>'
            case '&quot;':
                return '"'
            case '&amp;':
                return '&'
        }
    })
}

// 向外暴露成员
module.exports = {
    htmlEscape,
    unHtmlEscape
}

(3)在index.js中,导入以上两个模块,得到需要向外共享的方法,使用module.exports共享给外界

// 包的入口文件

// 导入dataFormat,htmlEscape包
const date = require('./src/dateFormat')
const html = require('./src/htmlEscape')
// 对外暴露需要的成员
module.exports = {

    // 展开得到对象的所有属性
    ...date,
    ...html
}

4.编写包的说明文档

示例:

## 安装
```
npm install pancc-tools
```

## 导入
```js
const pancc = require('pancc-tools')
```

## 格式化时间
```js
// 调用dateFormat()对时间进行格式化
const newDate = pancc.dateFormat(new Date())
// 结果     2023-05-09 01:23:38
console.log(newDate)
```

## 转义html中的特殊字符
```js
// 待转换的html的字符
const str = '<h1 title="abc">这是一级标题<span>123&nbsp</span><h1>'
// 调用htmlEscape()方法进行转换  
const resStr1 = pancc.htmlEscape(str)
// 结果     &lt;h1 title=&quot;abc&quot;&gt;这是一级标题&lt;span&gt;123amp;nbsp&lt;/span&gt;&lt;h1&gt;
console.log(resStr1)
```

## 还原html中的特殊字符串
```js
// 待还原的html的字符
const str = '<h1 title="abc">这是一级标题<span>123&nbsp</span><h1>'
// 调用UnHtmlEscape()方法进行转换
const resStr2 = pancc.unHtmlEscape(str)
// 结果     <h1 title="abc">这是一级标题<span>123&nbsp</span><h1>
console.log(resStr2)
```

## 开源许可协议
ISC