前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端基础-Node.js包管理器npm

前端基础-Node.js包管理器npm

作者头像
cwl_java
发布2020-03-26 16:22:06
1.3K0
发布2020-03-26 16:22:06
举报
文章被收录于专栏:cwl_Javacwl_Java

第3章 包管理器npm

3.1 使用moment

使用第三方包格式化时间

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.2 npm 命令的使用

上面的代码,我们使用npm安装了moment来进行格式化时间的处理,这就是使用第三方模块;

在这里插入图片描述
在这里插入图片描述

而我们使用的npm就是node中自带的包(模块)管理工具;

借助NPM可以帮助我们快速安装和管理依赖包,使Node与第三方模块之间形成了一个良好的生态系统;

在这里插入图片描述
在这里插入图片描述

我们也可以直接输入npm,查看帮助引导:

代码语言:javascript
复制
PS C:\xamp\htdocs\ceshi\09> npm

Usage: npm <command>

where <command> is one of:
    access, adduser, audit, bin, bugs, c, cache, ci, cit,
    completion, config, create, ddp, dedupe, deprecate,
    dist-tag, docs, doctor, edit, explore, get, help,
    help-search, hook, i, init, install, install-test, it, link,
    list, ln, login, logout, ls, outdated, owner, pack, ping,
    prefix, profile, prune, publish, rb, rebuild, repo, restart,
    root, run, run-script, s, se, search, set, shrinkwrap, star,
    stars, start, stop, t, team, test, token, tst, un,
    uninstall, unpublish, unstar, up, update, v, version, view,
    whoami

npm <command> -h  quick help on <command>
npm -l            display full usage info
npm help <term>   search for help on <term>
npm help npm      involved overview

Specify configs in the ini-formatted file:
    C:\Users\Administrator\.npmrc
or on the command line via: npm <command> --key value
Config info can be viewed via: npm help config

npm@6.4.1 C:\Program Files\nodejs\node_modules\npm

3.3 使用npm初始化项目

一个项目,不可能只是使用一个第三方包,而包越多,管理起来就越麻烦,

而 npm init 给我们提供了项目初始化的功能,也解决了多个包的管理问题:

在这里插入图片描述
在这里插入图片描述
代码语言:javascript
复制
"name": "usenpm", // 项目名
"version": "1.0.0", // 版本号
"description": "这是我们第一次使用npm",  // 描述信息
"main": "index.js", // 入口文件
"scripts": { // npm 设置的一些指令
    "test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [ // 关键字
    "第一次"
],
"author": "itheima6期", // 作者
"license": "ISC" // 当前项目的协议

3.4 解决 npm 被墙问题

npm 存储包文件的服务器在国外,有时候会被墙,速度很慢,所以我们需要解决这个问题。

http://npm.taobao.org/ 淘宝的开发团队把 npm 在国内做了一个备份。

安装淘宝的 cnpm:

代码语言:javascript
复制
# 在任意目录执行都可以
# --global 表示安装到全局,而非当前目录
# --global 不能省略,否则不管用
npm install --global cnpm

接下来你安装包的时候把之前的 npm 替换成 cnpm

举个例子:

代码语言:javascript
复制
# 这里还是走国外的 npm 服务器,速度比较慢
npm install jquery

# 使用 cnpm 就会通过淘宝的服务器来下载 jquery
cnpm install jquery

如果不想安装 cnpm 又想使用淘宝的服务器来下载:

代码语言:javascript
复制
npm install jquery --registry=https://registry.npm.taobao.org

但是每一次手动这样加参数很麻烦,所我们可以把这个选项加入配置文件中:

代码语言:javascript
复制
# 配置到淘宝服务器
npm config set registry https://registry.npm.taobao.org

# 查看 npm 配置信息
npm config list

只要经过了上面命令的配置,则你以后所有的 npm install 都会默认通过淘宝的服务器来下载。

3.5 package.json 与 package-lock.json 文件

如果后期开发过程中,需要项目迁移,我们只需要将package.json文件迁移即可,在新项目下执行

npm install ,所有第三方包会自动安装;

在这里插入图片描述
在这里插入图片描述

package.json的作用就是用来记录当前项目及包的使用情况;不能在package.json中添加注释

package-lock.json 保存第三方包的版本和下载路径等详细信息;

当我们使用npm管理包时,package.json 及package-lock.json 的内容都会自动更新

3.6 服务端页面渲染

之前的案例中,我们时通过前端浏览器发送ajax请求获取服务器数据的,前端获取数据后进行遍历展示;

在这里插入图片描述
在这里插入图片描述

缺点就是发送多次请求、不利于搜索引擎查找;我们修改为后端渲染数据;

art-template: https://www.npmjs.com/package/art-template

代码语言:javascript
复制
var art = require('art-template');
art.defaults.root = './';
var html = art('./art-test.html',{data:[{name:123,age:345},{a:678,b:987}]});
console.log(html);
代码语言:javascript
复制
<body>
    <h1>nihoa</h1>
    <h2>{{data[0].name}}</h2>
</body>

1:重新创建目录,并初始化项目: npm init

2:将之前写好的后台文件 http.js 和 前台模板页面 apache.html 复制到新项目目录中;

3:安装时间处理模块: npm install moment

4:安装模板引擎模块: npm install art-template

5: 修改 后台文件 http.js 和 前台模板页面 apache.html 文件

http.js :

在这里插入图片描述
在这里插入图片描述

apache.html :

在这里插入图片描述
在这里插入图片描述

那么我们在项目中应该使用 客户端渲染还是服务端渲染:

答:两者都用,根据数据的不同作用而定;

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 第3章 包管理器npm
    • 3.1 使用moment
      • 3.2 npm 命令的使用
        • 3.3 使用npm初始化项目
          • 3.4 解决 npm 被墙问题
            • 3.5 package.json 与 package-lock.json 文件
              • 3.6 服务端页面渲染
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档