Chapter 3 package manager npm
3.1 moment
Using third-party packet formatting time
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;
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;
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:
"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 npm
replacing cnpm
.
for example:
# 这里还是走国外的 npm 服务器,速度比较慢
npm install jquery
# 使用 cnpm 就会通过淘宝的服务器来下载 jquery
cnpm install jquery
If you do not want to install cnpm
want 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 install
will 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;
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;
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 :
apache.html :
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;