【webpack入门1】编写和发布一个npm模块

关于Webpack

Webpack 是一个流行的 JavaScript 应用程序的静态模块打包器(module bundler)，是工作在node和npm基础之上的一个现代化的前端构建工具。比webpack更早的两个前端构建工具是Gulp和Grunt。笔者之前使用过Gulp基于任务（Task）和流（Stream）模式的构建方式，在一些简单的任务处理（比如项目发布前对css/js文件进行合并压缩）上面还是很有优势的。Gulp4.0使用上有些许不同，请参考Gulp合并压缩css/js。
Webpack通过灵活的loader和插件机制为现代化的前端开发提供了全新的工作范式，尤其是其能够为React/Vue/Svelte等前端框架的单文件组件提供转译和打包支持。
Webpack是基于node和npm的，因此在学习webpack之前先要熟悉node和npm。

关于node和npm

• Node是一个程序执行环境，它基于Google Chrome V8的JavaScript引擎，能在PC和服务器上执行js代码。Node把js这种原本在浏览器上才能执行的语言上升到PC级，上升为一种可以编写服务端程序的编程语言。node在命令行下执行js类似下面这样的：

> node test.js
> (...outputs from test.js)
> 

这是不是很像通过java命令执行.class文件，或者通过go run命令执行golang代码呢？

• npm全称是Node Package Manager，是node生态的包管理工具，是随NodeJS一起安装的。npm是管理node模块（代码包）的远程中央仓库。任何开发者都可以提交符合npm规范（CommonJS）的代码包到npm仓库，只需要先注册一个账户，然后编写模块代码，最后通过npm publish命令发布即可。

编写和发布npm模块

以“输出一张九九乘法口诀表”这一功能为例，发布一个npm包的详细步骤如下。

第一步 node环境安装

环境安装：请参考官网或其他介绍，安装完成之后可通过node -v和npm -v查看相应版本来确认node和npm环境已经装好。

第二步 本地模块代码编写

在本地创建一个代码目录，例如D:\dev\web\npm\multiplication-table-99，然后在此目录下打开命令行程序（cmd或shell）。

关于windows用户如何在任何文件夹下，通过右键菜单快速打开cmd的小技巧请参考（超实用）win10右键菜单修改，实现任意位置打开cmd命令行程序

然后执行npm init命令在当前文件夹下交互式地创建模块描述文件package.json:

> D:\dev\web\npm>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (npm) multiplication-table-99
version: (1.0.0)
description: An multiplication table from 1*1 to 9*9.
entry point: (index.js)
test command: npm test
git repository:
keywords: multiplication table
author: linysuccess
license: (ISC) MIT
About to write to D:\dev\web\npm\package.json:

{
  "name": "multiplication-table-99",
  "version": "1.0.0",
  "description": "An multiplication table from 1*1 to 9*9.",
  "main": "index.js",
  "scripts": {
    "test": "npm test"
  },
  "keywords": [
    "multiplication",
    "table"
  ],
  "author": "linysuccess",
  "license": "MIT"
}


Is this ok? (yes) yes

接下来在模块目录下编写需要发布的功能代码（以输出九九乘法表为例）index.js：

/*!
 * Print multiplication table from 1*1=1 to 9*9=81.
 *
 * @author   linysuccess@qq.com
 * @license  MIT
 */
;(function() {
    function tablePrint(size) {
        for (var i = 1; i <= size; i++) {
            var li = '';
            for (var j = 1; j <= size; j++) {
                if (j <= i) {
                    li += (j + '*' + i + '=' + (i * j) + '  ');
                }
            }
            console.log(li);
        }
    }

    module.exports = {
        print: tablePrint,
        print99Table: function () {
            tablePrint(9);
        }
    }
})();

如此一个本地模块就完成了，接下来就可以发布到npm仓库了。

第三步 注册npm账号并登录

发布代码之前需要先注册登录到npm。

• 一种方式是去npmjs官网https://www.npmjs.com/注册账户。

注册中需要填写个人公开邮箱，注册后进入个人邮箱激活账户后才能发布npm模块。

注册并激活账户后，可通过npm login登录到npm。

• 另一种方式是npm命令交互式地注册用户：

D:\dev\web\npm>npm adduser
Username: linysuccess
Password:
Email: (this IS public) linysuccess@qq.com
Logged in as linysuccess on https://registry.npmjs.org/.

adduser完成后，自动登录到npm了。

第四步 发布模块

直接进入本地模块目录，通过npm publish命名提交模块到npm仓库：

D:\dev\web\npm\multiplication-table-99>npm publish
+ multiplication-table-99@1.0.1

+号表示已经发布成功。如果修改代码后需要再次发布到npm仓库，则要升级package.json中的版本，否则会报E403错误：

npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! You cannot publish over the previously published versions

当然，如果账号没有激活，或者没有登录到npm就直接npm publish肯定也是会报错的，比如账号未激活的情况：

npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! you must verify your email before publishing a new package: https://www.npmjs.com/email-edit : xxx

第五步 引用自己发布的模块（附加）

跟安装和引用其他用户模块没有区别。
比如，先在本地目录下安装：

> npm install multiplication-table-99

然后在该目录下的test.js代码中使用：

var multi99Table = require('multiplication-table-99');
multi99Table.print99Table();

执行代码输出九九乘法表：

> node test.js
> 1*1=1
> 1*2=2  2*2=4
> 1*3=3  2*3=6  3*3=9
> 1*4=4  2*4=8  3*4=12  4*4=16
> 1*5=5  2*5=10  3*5=15  4*5=20  5*5=25
> 1*6=6  2*6=12  3*6=18  4*6=24  5*6=30  6*6=36
> 1*7=7  2*7=14  3*7=21  4*7=28  5*7=35  6*7=42  7*7=49
> 1*8=8  2*8=16  3*8=24  4*8=32  5*8=40  6*8=48  7*8=56  8*8=64
> 1*9=9  2*9=18  3*9=27  4*9=36  5*9=45  6*9=54  7*9=63  8*9=72  9*9=81

恭喜你已经学会一个npm模块的发布，接下来进入下一环节，发布一个npm命令行程序。