前端知识大汇总-npm

前端知识大汇总-npm

十一月 30, 2018

从今天开始，利用一些空闲时间开始整理以前自己接触到的一些前端后端知识，有些是自己使用过的，有的是网上搜罗的一些，也有是书上看到的。一些东西过一段时间不用，虽然有微许印象，但是总没有那种了然于胸的感觉，所以感觉写下来能好点，聊胜于无。

npm，简而言之，就是前端包管理器，类似于后端开发Java中的maven或者gradle，使前端人员开发分享和复用代码变得更加容易。

####安装npm

npm的安装比较简单，它直接依赖于node，node安装好之后就自带npm，版本可能不是最新的，我们可以通过以下命令安装最新版本的npm：

1
npm install -g npm@latest

这是一个标准的安装包的命令：install可以简写为-i，-g意思就是全局安装，npm@latest就是npm的最新版本，这种name@version的书写方式就是为了定位一个js包，这种声明方式就类似于maven中的groupId + artifactId + version定位一个唯一jar一样。我们可以通过npm去官方仓库或者第三方仓库（国内一般会使用淘宝源）下载我们项目中使用到的一些包，或者也可以把我们自己封装的一个包推送到npm仓库，供别人分享使用。

####package.json文件

这个文件是用来管理本地安装npm包，试想一下，我们在编写一个项目的时候，可能要使用到好多公共包，什么名字，什么版本，这样就需要一个文件来统一管理，同时如果以后要创建一个类似项目，那么我们可以直接把package.json文件拷贝一份，npm install一下，一个同样的项目骨架就出来了，十分方便：

  1. 描述项目需要哪些包；
  2. 指定需要包的版本；
  3. 同类项目构建可重复使用。
  • 创建package.json

创建一个新目录，进入目录，输入npm init即可：

1
2
3
4
mkdir test
cd test
npm init
...

根据提示一步步走完会自动生成，如果觉得麻烦，可以使用npm init –yes跳过指示步骤直接生成，大致如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "name": "npm-test",
  "version": "1.0.0",
  "description": "test",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "keywords": [
    "test"
  ],
  "author": "color",
  "license": "ISC"
}

一个标准的json文件：

  1. name：项目名称（字母小写）
  2. version：版本号
  3. description：描述信息
  4. main：入口文件
  5. scripts：支持脚本，一般我们可以在这里编写项目启动或者打包，test命令
  6. keywords：关键字
  7. author：作者
  8. license：协议

生成的文件中是没有任何npm包依赖的，如果要安装依赖，有以下两种方式：

  1. npm install -save name@version
  2. 在package.json中增加dependencies，value是个对象，然后填写key(name):value(version)，最后npm install一下

主要要注意一下不同命令的区别：

npm install X:

  • 会把X包安装到node_modules目录中
  • 不会修改package.json
  • 之后运行npm install命令时，不会自动安装X

npm install X –save:

  • 会把X包安装到node_modules目录中
  • 会在package.json的dependencies属性下添加X
  • 之后运行npm install命令时，会自动安装X到node_modules目录中
  • 之后运行npm install
    –production或者注明NODE_ENV变量值为production时，会自动安装msbuild到node_modules目录中

npm install X –save-dev:

  • 会把X包安装到node_modules目录中
  • 会在package.json的devDependencies属性下添加X
  • 之后运行npm install命令时，会自动安装X到node_modules目录中
  • 之后运行npm install
    –production或者注明NODE_ENV变量值为production时，不会自动安装X到node_modules目录中
  • 使用npm安装的包

install好的包会默认在node_modules，我们要使用的话直接在文件中require一下就好了。

参考