最近会记录一些今年前端工程化的笔记，常读常新。
欢迎铁子们给波点赞、关注。
废话不多说，搞起。
0.创建一个包文件夹
mkdir my-first-npm-package && cd my-first-npm-package
1.初始化一个 package.json
执行 npm init 后填写一串问题，就能生成一个 package.json 文件，类似如下：
> npm init
package name: (my-first-npm-package)
version: (1.0.0) 1.0.0
description: my first npm package
entry point: (index.js)
test command:
git repository:
keywords:
author: 2205405321@qq.com
license: (ISC)
About to write to /Users/chokingwin/code/frontend/my-first-npm-package/package.json:
{
"name": "my-first-npm-package",
"version": "1.0.0",
"description": "my first npm package",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "2205405321@qq.com",
"license": "ISC"
}
Is this OK? (yes) yes
这里有几种常见的组合值得一说。
如果为了跳过繁复的问题填写，你可以带上 -y 或 --yes，这样生成的 package.json 文件，会使用 npm 默认配置。
> npm init -y
> npm init --yes
这个默认配置是可以通过如下命令进行配置：
> npm set init.author.email "example-user@example.com"
> npm set init.author.name "example_user"
> npm set init.license "MIT"
另外，因为包名的唯一性，我们这次使用的 my-first-npm-package 包名，大概率早就被人使用过了（先到先得呀🤣）。为了避免碰墙，我们再使用个 scope 标志来创建 package.json 。
> npm init --scope=@chokingwin -y
这个玩意相当于设置个命名空间，告诉 npm 仓库，这是 chokingwin 家的一个叫 my-first-npm-package 的包，别搞混了哈。
2.在入口文件写下你这个包的核心逻辑
我们观察下通过 npm init --scope=@chokingwin -y 生成的这个 package.json 。
{
"name": "@chokingwin/my-first-npm-package",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
需要关注其中 main 这个字段，它标明了哪个文件是整个包的入口文件。
这么看，我们需要在根目录下新建一个 main.js 文件了。
既然都是包入口文件了，那就把我们这次的包逻辑，写在这个文件里呗。😁
exports.printMsg = function () {
console.log("This is a message from the @chokingwin/my-first-npm-package package.");
}
简单导出一个 printMsg 方法。
3.建一个测试目录，试着引入看看有无问题
到这步，我们得看看我们 @chokingwin/my-first-npm-package 包里的 printMsg 方法，是否能被正确使用了。
再另起新建个文件夹 test-directory ，我们使用 npm i /Users/chokingwin/code/frontend/my-first-npm-package 安装下这个包。
注意：这里的包还未发布，包名需要使用你，本地包文件夹所在的绝对路径哦。对应到我这里的就是 /Users/chokingwin/code/frontend/my-first-npm-package
安装成功后，在命令行应该会看到类似如下内容：
> npm i /Users/chokingwin/code/frontend/my-first-npm-package
npm WARN saveError ENOENT: no such file or directory, open '/Users/chokingwin/code/frontend/test-directory/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 '/Users/chokingwin/code/frontend/test-directory/package.json'
npm WARN test-directory No description
npm WARN test-directory No repository field.
npm WARN test-directory No README data
npm WARN test-directory No license field.
+ @chokingwin/my-first-npm-package@1.0.0
added 1 package in 0.245s
在包安装成功后，我们写个 test.js 文件来引入 printMsg 方法。
var { printMsg } = require('@chokingwin/my-first-npm-package');
printMsg();
执行，测试下效果。
> node test.js
This is a message from the @chokingwin/my-first-npm-package package.
OK，到此为止，看来是没啥毛病了。
4.发布
最后一步，把我们的包发布到 npm 仓库去，前提当然是你注册过账号了。
先执行 npm whoami 看下是否登陆过 npm。
> npm whoami
npm ERR! code ENEEDAUTH
npm ERR! need auth This command requires you to be logged in.
npm ERR! need auth You need to authorize this machine using `npm adduser`
提示 ENEEDAUTH ，显然我们还要登录下。
执行下 npm adduser ，输入你注册时的 Username、Password、Email
> npm adduser --registry=https://registry.npmjs.org --scope=@chokingwin --always-auth
> npm adduser --registry=https://registry.npmjs.org --scope=@chokingwin --always-auth
Username: chokingwin
Password:
Email: (this IS public) 2205405321@qq.com
Logged in as chokingwin to scope @chokingwin on https://registry.npmjs.org/.
登录成功后，使用 npm publish 就能发布了。
考虑到我们的包还使用了 scope，我们得使用 npm publish --access public。
> npm publish --access public
npm notice
npm notice 📦 @chokingwin/my-first-npm-package@1.0.0
npm notice === Tarball Contents ===
npm notice 123B main.js
npm notice 245B package.json
npm notice === Tarball Details ===
npm notice name: @chokingwin/my-first-npm-package
npm notice version: 1.0.0
npm notice package size: 368 B
npm notice unpacked size: 368 B
npm notice total files: 2
npm notice
+ @chokingwin/my-first-npm-package@1.0.0
看到如上信息，就表示我们的包已经发布上去了。
这时去 npmjs.com 后台刷新看看，也能看到你刚刚发布的包了。
nice job，今天就到这。喜欢的铁子，给波点赞、关注啊。🤡
