webpack之npm基础

webpack基础之npm

1. npm简介
   npm 是Node 的模块管理器，功能极其强大。 它是Node 获得成功的重要原因之一。 正因为有了npm，我们只要一行命令，就能安装别人写好的模块。
   只要安装了node就不用再独自安装，全名：node packge manage node包管理器。

2. 用init命令生成第一个模块
   包的概念是建立在“packge.json”上用node创建的包必须有packge.json文件，该文件是包的生命基因，npm几乎所有命令都是围绕它进行的，比如包的出生 npm init

npm init

回车默认到底就会 生成packge.json文件：

{
  "name": "demo-2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

创建过程中会有简单几步交互，需要注意的是模块的名字和版本号是必填项，此处不用多做解释，我想但凡是个人都能明白什么意思，前提是你必须要去实践。

创建入口文件
默认入口文件是index.js(当然你也可以再packge.json中配置修改)，我们再同目录下新建index.js文件编辑内容：

exports.cc = function () {
    console.log("holle world");
};

此时作为一个最简单的“holle world”包就在本地诞生了，但是现在除了它对你本地有用之外别人（互联网世界的人）不知道它诞生了，所以我们必须要将它上传npm（我想你应该明白为什么 你可以用npn install去下载别人的包了吧！）

2. 发布包到npm服务器

npm注册
现在到了必须告诉您npm官方地址的时刻 npm
和所有资源类网站一样您需要注册，登录。当然npm是一个强大的命令库你当然可以一命令的方式登录 npm login

PS C:\Users\gcc\Desktop\npmPJ\demo-2> npm login
Username: guocongcong-cc
Password:
Email: (this IS public) xxxxxx@163.com
Logged in as guocongcong-cc on https://registry.npmjs.org/.
PS C:\Users\gcc\Desktop\npmPJ\demo-2>

发布

发布包命令：npm publish
发布过程会把整个目录发布,不想发布的内容模块,可以通过 .gitignore 或 .npmignore 文件进行忽略处理

PS C:\Users\gcc\Desktop\npmPJ\demo-2> npm publish
npm notice
npm notice package: gcc-2@1.0.0
npm notice === Tarball Contents ===
npm notice 201B package.json
npm notice 63B  index.js
npm notice === Tarball Details ===
npm notice name:          gcc-2
npm notice version:       1.0.0
npm notice package size:  320 B
npm notice unpacked size: 264 B
npm notice shasum:        f1275d8f54b95643a7fd5aae2f96ac40a60806be
npm notice integrity:     sha512-XlB2cieTRnYAk[...]7F5TyN1tyfosQ==
npm notice total files:   2
npm notice
+ gcc-2@1.0.0

npm官网查看

发布成功会收到邮件提醒：

此时全世界人民应该都能npm install 你的包了，虽然它是一个对别人来说是没用的东西，恭喜的是“你创造了它”，你已经拥有了创建包发布包的能力！

3. 引用你自己的包
   好的你已经很学会如何创建并发布包，现在到了如何使用包的时候了，相信你和我一样在没有自己发布包之前已经引用过n多次别人的包了吧，今天开始你就可以使用自己的包了，你也具备了对这个互联网世界有做贡献的能力了（类似的豪言壮语从小学加入少先队你应该说过n次了，但从未践行过！）

新建一个工程文件夹demo3，在工程根目录下执行 npm install gcc-2（上一步发布包时的名字）

PS C:\Users\gcc\Desktop\npmPJ\demo-3> npm install gcc-2
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\gcc\Desktop\npmPJ\demo-3\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\gcc\Desktop\npmPJ\demo-3\package.json'
npm WARN demo-3 No description
npm WARN demo-3 No repository field.
npm WARN demo-3 No README data
npm WARN demo-3 No license field.

+ gcc-2@1.0.1
added 1 package and audited 1 package in 3.675s
found 0 vulnerabilities

安装成功使用验证，同目录下新建index.js文件编辑内容

var test = require('gcc-2');
test.cc();

运行 node index.js或调试index.js

C:\Program Files\nodejs\node.exe --inspect-brk=6656 index.js 
Debugger listening on ws://127.0.0.1:6656/80c29f04-ed7c-4e1d-b0b7-6fc0e08eb0da
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
holle world

ok,“holle world”

4. 更新你自己的包
   万里长城不是一次堆砌成的，没有一个包是一次做成的，新的功能时不断地更新完成的，npm包也不例外，

我们将第二部的包下index.js文件修改

exports.cc = function () {
    console.log("holle world,I am coming.");
};

聪明的你此时肯定想再次执行npm publish，但悲剧的是报错了

PS C:\Users\gcc\Desktop\npmPJ\demo-2> npm publish
npm notice
npm notice package: gcc-2@1.0.1
npm notice === Tarball Contents ===
npm notice 201B package.json
npm notice 76B  index.js
npm notice === Tarball Details ===
npm notice name:          gcc-2
npm notice version:       1.0.1
npm notice package size:  328 B
npm notice unpacked size: 277 B
npm notice shasum:        fac60bd53f49a7414fa74dd04d1cf624a6e2b23b
npm notice integrity:     sha512-HZ8LwwezM7uA8[...]VrMHdMJ2Tmh9w==
npm notice total files:   2
npm notice
npm ERR! code E403
npm ERR! 403 Forbidden - PUT https://registry.npmjs.org/gcc-2 - You cannot publish over the previously published versions: 1.0.1.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\gcc\AppData\Roaming\npm-cache\_logs\2019-12-06T08_15_13_709Z-debug.log
PS C:\Users\gcc\Desktop\npmPJ\demo-2>

告诉你版本号过期了，所以我们需要编辑packge.json文件将版本号改为1.0.2

再次执行 webpack publish

PS C:\Users\gcc\Desktop\npmPJ\demo-2> npm publish
npm notice
npm notice package: gcc-2@1.0.2
npm notice === Tarball Contents ===
npm notice 201B package.json
npm notice 76B  index.js
npm notice === Tarball Details ===
npm notice name:          gcc-2
npm notice version:       1.0.2
npm notice package size:  328 B
npm notice unpacked size: 277 B
npm notice shasum:        a1eaf36fe3dee01eb040f4ad0293f8ca7f6a2a20
npm notice integrity:     sha512-6pcPsXLpu+v0m[...]oMJRZ94KfZkig==
npm notice total files:   2
npm notice
+ gcc-2@1.0.2
PS C:\Users\gcc\Desktop\npmPJ\demo-2> 

ok,验证之！

PS C:\Users\gcc\Desktop\npmPJ\demo-3> node index.js
holle world,I am coming.
PS C:\Users\gcc\Desktop\npmPJ\demo-3> 

5. 结束语

webpack的应用基础时npm，所以在开始webpack教程之前我们很有必要对npm做一个深入的了解，同样对于学习其他框架也是很有必要的。下篇开始真正的webpack干活奉上。

此篇博文是本人第一篇原创，用了大概两个多小时，应该还算详尽，所有代码贴图是同步执行的结果，原创不易，转载请注明出处，另外这篇博文也借鉴了

https://www.jianshu.com/p/9a9ed7eaf655

向该作者致以崇高的敬意，感谢您的付出也让我学会了写自己的博客！

分享精神，永存不朽！