深圳网页设计模板_网络规划设计师薪资_深圳网络推广网站_建立网站需要多少钱

文章目录

• • @[TOC](文章目录)
• 3.npm与包
• • 3.1.包
  • 3.2.npm体验
  • 在项目中安装包的命令
  • 包管理配置文件
  • 一次性安装开发项目时安装的包
  • 如何从项目中卸载包
  • devDependencies节点的作用
  • 解决下载包速度比较慢的问题
  • nrm工具，利用其提供的终端命令，可以快速查看和切换下包的镜像源
  • 包的分类
  • • 全局包
    • i5ting_toc
    • 规范的包结构
  • 如何开发包
  • • 需要实现的功能
    • 初始化package.json文件
    • index.js文件中定义对应的方法
    • 测试是否可以初始化时间
    • 在入口文件index.js中定义转义标签的函数
    • test.js文件中
    • 将转换后的标签转为标签
  • 将不同的功能进行模块化划分
  • • 新建文件夹src里面放对应每个方法的js文件，在入口文件index.js文件中`require`关键字引入对应的js文件，再对外暴露，供外部使用就可以了
  • 如何发布npm包
  • 发布包命令 npm publish

3.npm与包

3.1.包

🥞包的来源：不同于内置模块与自定义模块，包是第三方个人或团队开发出来的，免费供所有人使用的。
🚕原因：由于内置模块仅提供了一些底层的API，导致在基于内置模块进行项目开发时，效率会很低。
🌮基于内置模块封装了更高级、更方便的api,随之效率也会提高。
🍕从哪里下载包，npmjs.com网站

3.2.npm体验

格式化时间的传统作法

• 定义格式化时间的模块

15.dateFormat.js

//定义格式化时间的方法
function dateFormat(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 = {dateFormat
}

• 引入格式化时间模块

const TIME = require('./15.dateFormat');
const dt = new Date();
console.log(TIME.dateFormat(dt));

较麻烦，如果使用第三方封装好的包，则简化了很多步骤，只需安装对应的包，再引入使用即可

在项目中安装包的命令

🥟如果想在项目中安装指定名称的包，需要执行以下命令即可

npm insatll 包的完整名称

在项目中新建文件，moment案例.js

//1.导入需要的包
//注意：导入的名称，就是装包时候的名称
const moment = require('moment');
const time = moment().format('YYYY-MM-DD HH:mm:ss'); //获取当前时间
console.log(time) //输出当前时间;

🌯如何安装指定版本的包
需要在包名称后面加上@具体版本号即可
🧀包的语义化版本规范
包的版本号是以"点分十进制"形式定义的，总共有三个数字，例如1.10.2

包管理配置文件

🍕npm规定，在项目根目录中，必须提供一个package.json的包管理配置文件。用来记录与项目有关的一些配置信息。如：

• 项目名称、版本号、描述等
• 项目中用到了哪些包
• 哪些包只在开发期间会用到
• 哪些包在开发和部署时都会用到
• 也解决了多人协作而产生的问题

当团队多人开发时，由于第三方包占用空间较大，团队成员需要重新安装即可

一次性安装开发项目时安装的包

执行命令npm i即可

如何从项目中卸载包

执行命令npm uninstall 包名字

devDependencies节点的作用

记录在开发环境中安装的包

解决下载包速度比较慢的问题

🍔切换npm的下包镜像源(就是下包的服务器地址)

//1.查看当前的下包镜像源
npm config get registry
//2.将下包的镜像源切换为淘宝镜像源
npm config set registry=https://registry.npm.taobao.org/
//3.检查镜像源下载是否成功
npm config get registry

nrm工具，利用其提供的终端命令，可以快速查看和切换下包的镜像源

//把nrm安装为全局可用的工具
npm i nrm -g
//查看所有可用的镜像源
nrm ls
//将下载的镜像源切换为taobao镜像
nrm use taobao

包的分类

全局包

🧨在执行了npm i命令时，如果提供了-g参数，则会把包安装为全局包。
全局包会被安装到C:\Users\用户目录\AppData\Roaming\npm\node_modules目录下

i5ting_toc

🌮可以把md格式的文档转转化为html格式的小工具

规范的包结构

一个规范的包，它的组成结构，必须符合以下3点要求：

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

如何开发包

需要实现的功能

//🍔1.导入包
const dkc = require('dkc-utils') 
//2.转义html中的特殊字符------
const htmlStr = ' <h1 style="color:red;">你好！&copy;<span>小黄！</span></h1>'
const str = dkc.htmlEscape(htmlStr)
console.log(str)
//&lt;h1 style=&quot;color:red;&quot;&gt;你好！&amp;copy;&lt;span&gt;小黄！&lt;/span&gt;7lt;/h1&gt;
//3.console.log(str)

🍕2.初始化包的基本结构

• 1.新建一个文件夹，在这个文件夹中，新建如下三个文件：
• package.json（包管理配置文件）
• index.js(包的入口文件)
• README.md(包的说明文档)

初始化package.json文件

{
{"name": "chenshen-tools","version": "1.0.0","description": "提供了时间初始化，HTMLEscape的功能","main": "index.js","license": "ISC"
}
}

index.js文件中定义对应的方法

//入口文件
//定义格式化时间的函数
function dateFormat(date) {const dt = new Date(date);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(num) {return num > 9 ? num : '0' + num;
}
module.exports = {dateFormat
}

测试是否可以初始化时间

新建test.js文件

const tools = require('./index.js');
const str = tools.dateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss')
console.log(str);

在入口文件index.js中定义转义标签的函数

//转义字符
function escapeChar(htmlStr) {
return htmlStr.replace(/[<>&*]/g,(match) => {switch (match) {case '<':return '&lt;'case '>':return '&gt;'case '"':return '&quot;'case '&':return '&amp;'}})}
module.exports = {
dateFormat,escapeChar
}

test.js文件中

const htmlStr ='<h1 class="title">这是h1标题<span class="red">红色span&nbsp;</span></h1>'
const str2 = tools.escapeChar(htmlStr)
console.log(str2);

将转换后的标签转为标签

function htmlUnEscape(str){return str.replace(/&lt;|&gt;|&quot;|&amp;/g,(match)=>{switch(match){case '&lt;':return '<'case '&gt;':return '>'case '&quot;':return '"'case '&amp;':return '&' }
})
}
module.exports = {dateFormat,escapeChar,htmlUnEscape
}

将不同的功能进行模块化划分

新建文件夹src里面放对应每个方法的js文件，在入口文件index.js文件中require关键字引入对应的js文件，再对外暴露，供外部使用就可以了

如何发布npm包

• 1.注册npm账号
  

发布包命令 npm publish

• 在终端中登录npm，(而不是镜像地址的npm)发布对应的包。