-Node.js distal base package manager npm

Chapter 3 package manager npm

3.1 moment

Using third-party packet formatting time

Here Insert Picture Description

Here Insert Picture Description

Here Insert Picture Description

Use 3.2 npm command

The above code, we used npm installed moment to process formatting time, which is the use of third-party modules;

Here Insert Picture Description

The npm is the node that comes with the package we use (module) management tools;

With NPM can help us to quickly install and manage dependencies, the formation of a good ecosystem between Node and third-party modules;

Here Insert Picture Description

We can also enter npm direct view to help guide:

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

[email protected] C:\Program Files\nodejs\node_modules\npm

3.3 npm initialize the project

A project can not just use a third-party package, and package the more, the more trouble to manage,

The npm init provides us with a project initialization function, but also solve the problem of managing multiple package:

Here Insert Picture Description

"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 solve the problem by a wall

Npm package file storage server in a foreign country, sometimes by a wall, is very slow, so we need to solve this problem.

http://npm.taobao.org/ Taobao development team to npm in the country to do a backup.

Installation Taobao cnpm:

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

The next time you install the package before npmreplacing cnpm.

for example:

# 这里还是走国外的 npm 服务器,速度比较慢
npm install jquery

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

If you do not want to install cnpmwant to use Taobao's server to download:

npm install jquery --registry=https://registry.npm.taobao.org

But each time to manually add this parameter a lot of trouble, that we can put this option is added to the configuration file:

# 配置到淘宝服务器
npm config set registry https://registry.npm.taobao.org

# 查看 npm 配置信息
npm config list

After the above configuration as long as the command, then all of your future npm installwill be downloaded by default Taobao server.

3.5 package.json and package-lock.json file

If later in the development process, the need to migrate the project, we only need to package.json file migration can be run in the new project

npm install All third-party packages will be automatically installed;

Here Insert Picture Description

Package.json action is used to record the use of the current project and package;不能在package.json中添加注释

package-lock.json saved version of a third-party package details and download path so on;

When we use npm Management Pack, package.json and package-lock.json contents are automatically updated

3.6 server-side page rendering

Before the case, send ajax request to obtain data on the server through a browser front end when we, after traversing the front display to obtain data;

Here Insert Picture Description

Drawback is to send multiple requests, is not conducive to a search engine to find; we modify the rendering data for the back end;

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

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);
<body>
    <h1>nihoa</h1>
    <h2>{{data[0].name}}</h2>
</body>

? 1: Re-create the directory, and initialize the project: npm init

2: previously written documents http.js background and foreground template page apache.html copied to the new project directory;

3: Installation time processing module: npm install moment

4: Install the template engine module: npm install art-template

5: Modify the foreground and background file http.js page template file apache.html

http.js :

Here Insert Picture Description

apache.html :

Here Insert Picture Description

Then we should use the client-side rendering or rendering services in the project:

A: Both are used, depending on the role of the data set;

Released 1807 original articles · won praise 1929 · Views 170,000 +

Guess you like

Origin blog.csdn.net/weixin_42528266/article/details/105117443