【工程化】从零创建自己的npm包并发布到公共仓库选择打包工具（webpack、rollup、parcel），初始化pac

零、打包工具的选择

工欲善其事,必先利其器。我们第一步先选择符合我们npm包的打包工具。

以下是笔者对打包工具简单入门的文章

1.从零使用webpack打包

2.从零使用rollup打包

3.从零使用parcel打包

打包工具的对比就去看这位大佬的文章吧新一代构建工具(1)：对比rollup/parcel/esbuild—esbuild脱颖而出作者：周陆军博客

以上对于快速发布其实没有帮助，可以先不关注。

实践出真知，以最快、最简洁的方法先跑起来

一、创建自己的包文件

注意：文件名称只能包含小写字母、数字，短横线（-）和下划线（_）且不能开头或结尾。不能包含空格和其他特殊字符

mkdir nolanzhao_firstnpm
cd nolanzhao_firstnpm

执行以下命令初始化package.json

npm init -y

其实仅需一个package.json文件就足够上传了，但这作为我第一个npm包，我写了一个README.md增加仪式感

#### Welcome!
This is my first npm package.
From the author: Nolan Zhao

#### 欢迎您！
这是我第一个npm包
来自作者：赵宇豪

二、发布至官方npm仓库

二.1、注册账号

npm官网

二.2、切换npm官方源

npm config set registry https://registry.npmjs.org/

要发布到淘宝源等，自行搜索，不是核心内容

二.3、终端登录npm账号

npm login

执行后按个回车会跳转到浏览器，登录账号就行

二.4、发布

npm publish

三、小结语

至此，我从零发布了自己的第一个npm包。可以通过以下代码进行下载：

npm install nolanzhao_firstnpm@1.0.0

接下来是为其填充东西来丰富自己的npm包。

四、简单解释package.json

"name": 包的名称。
"version": 包的版本号。
"description": 包的描述信息。
"main": 包的入口文件。
"scripts": 定义了一些脚本命令，比如 start 和 test。
"repository": 包的代码仓库信息。
"keywords": 关键字数组，用于描述包的特性。
"author": 包的作者信息。
"license": 包的许可证。
"dependencies": 依赖的生产环境包列表。
"devDependencies": 依赖的开发环境包列表。
"engines": 指定了所需的 Node.js 版本。

五、添加照片

当前目录树

.
|-- dist
|   `-- ikun.png
|-- README.md
`-- package.json

六、添加html文件

当前目录树

.
|-- dist
|   |-- hellonpm.html
|   `-- ikun.png
|-- README.md
`-- package.json

七、将js文件使用rollup打包并作为入口文件

七.1、写js文件

hellonpm.js

console.log('Hello NPM!')
alert('Hello NPM!')

七.2、终端用rollup命令打包进dist目录

rollup ./hellonpm.js --file ./dist/main.js --format umd

当前目录树

.
|-- dist
|   |-- hellonpm.html
|   |-- ikun.png
|   `-- main.js
|-- hellonpm.js
|-- README.md
`-- package.json

八、修改package.json文件

修改前的文件：

{
  "name": "nolanzhao_firstnpm",
  "version": "1.0.0",
  "description": "This is my first npm package.\r From the author: Nolan Zhao",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

修改版本号（"version"）
修改入口文件（"main"）
修改作者（"author"）
增加"files"

修改后的文件：

{
  "name": "nolanzhao_firstnpm",
  "version": "1.0.1",
  "description": "This is my first npm package.\r From the author: Nolan Zhao",
  "main": "dist/hellonpm.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "files": [
    "dist"
  ],
  "keywords": [],
  "author": "Nolan Zhao",
  "license": "ISC"
}

九、发布npm包

npm login

回车跳转浏览器登录

npm publish

至此，我已经发布了版本号为1.0.1的nolanzhao_firstnpm包可以通过以下命令下载

npm install nolanzhao_firstnpm@1.0.1

十、结语

不要多想，先跑起来。

与君共勉