1.0.3 • Published 3 years ago

plasma007-my-npm-test v1.0.3

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

如何编写一个自己的包，然后发布包、维护包？

环境准备

安装node的环境

学习npm包管理首先得要安装好Node.js环境,这个就自行搜索查看相关教程安装，这里不详细展开细说了

更新npm工具版本

Node.js自带npm,但是一般自带的npm版本会比最新版要低一下，可以手动更新npm的版本到最新 

npm install npm@latest -g

npm账号注册

我们发布包到npmjs上，那么我们就需要有一个自己的npm账号，大家可以通过 npm官网自行注册，以便后续学习使用。

npm的基本使用

一、体验初始化npm项目

在准备好环境后，我们先来体验一下初始化npm项目的流程。 输入npm init命令后，按照提示输入对应内容，这里我们暂时不需要输入任何内容，一直回车让其保持为空就行。 1. 在指定路径下使用terminal工具执行以下命令，创建一个新文件夹,并切换到该目录下

```js
mkdir npmtest
cd npmtest
```

  1. 执行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 init` 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: (npmtest)
version: (1.0.0)
description: 
git repository:
keywords: 
author: 
license: (ISC)
About to write to ***********\npmtest\package.json:

{
  "name": "npmtest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
Is this OK? (yes) yes
*/
```
  1. 执行完初始化命令后，在项目目录文件中会出现一个package.json文件，文件内容如下：
     {
   "name": "npmtest",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
 }
  2. 此时的目录树结构如下：
    ├─npmtest
|  ├─package.json
  3. 通过这个过程，我们可以看到使用npm包对项目进行包装其实是非常简单的，管理也是非常简单，对依赖的管理也很简单，只有一个package.json文件。

二、配置基本用户信息

  1. 设置初始化默认的用户名、邮箱、license，设置好这个以后就不用我们自己再一个个根据命令行提示设置
     npm set init.author.email "双引号里填写自己的邮箱"
 npm set init.author.name "双引号里填写自己的名字"
 npm set init.license "双引号里填写证书类型"
 // 例如：我自己设置的默认信息如下
 npm set init.author.email "897317986@qq.com"
 npm set init.author.name "plasma007"
 npm set init.license "MIT"
  2. 我们现在可以使用npm init -y命令进行快速的初始化了
     npm init -y
  3. 我们可以看到在package.json文件中，author license的值就是我们设置的默认值。
     Wrote to ****\npmtest\package.json:
 {
   "name": "npmtest",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "plasma007 <897317986@qq.com>",
   "license": "MIT"
 }

三、创建并发布一个自己的package

在前面的步骤中我们已经体验了如果初始化npm项目，现在我们则来创建并发布自己的包。 1. 创建一个文件夹，并打开该路径，这里建议文件夹名称与包名保持一致（要发布的包不能重名，这里应该取一个与众不同的包名来替换plasma007-my-npm-test） 

 mkdir plasma007-my-npm-test
 cd ./plasma007-my-npm-test

此时的目录树结构：

├─plasma007-my-npm-test
|

  1. 创建一个简单的脚本文件 lib/index.js (什么名字都可以，用作入口文件一般同包名或者使用index)， 写一个简单的函数如下: 

    const printMsg = () => {
  console.log("This is a message from the demo package");
}

module.exports = {
  printMsg
}

    此时的目录树结构：

    ├─plasma007-my-npm-test
|  ├─index.js

  2. npm初始化项目

    npm init

// 按提示输入项目相关信息,自己输入后命名为输入的名字，package名可以在后面的package.json配置文件中修改
package name: (默认文件夹名) plasma007-my-npm-test
// 默认版本号是1.0.0 同上
version: (1.0.0)
// 对包的详细描述
description: 这是我学习npm包管理的第一个项目尝试 
// 入口文件，默认是index.js
entry point: (index.js)
// test命令
test command: 
// 项目的git仓库地址，比如github、gitee等
git repository:
// 关键字
keywords: mytest
// 项目作者名
author: plasma007
// 包的许可证类型，默认ISC
license: (ISC) MIT

    此时的目录树结构：

    ├─plasma007-my-npm-test
├─lib
|  ├─index.js
├─package.json

  3. 初始化项目成功后提示相关信息已写入/plasma007-my-npm-test/package.json中，回车

    About to write to ****\plasma007-my-npm-test\package.json:

{
  "name": "plasma007-my-npm-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "plasma007 <897317986@qq.com>",
  "license": "MIT"
}

Is this OK? (yes) yes

  4. 如果还没有登录npm账号，则需要先登录，如果登录失败有可能是后文中常见问题列表 1. 无法登录npm的情况，可按照里面的方法解决。 

    npm login
// 按提示输入用户名和密码，密码输入时不显示
Username: plasma007 // 分别输入自己的账号密码
Password:
  5. 将写好的包发布
    npm publish 
// npm 会提示很多信息，如果最后没报错 且最后一行是 + xxxx@1.0.0 就代表发布成功了
  6. 接下来验证一下自己的包是否已成功发布。在另外的目录下创建新的目录,并打开
    mkdir testnpm
cd ./testnpm
  7. npm安装刚才发布的包 npm install + 包名，包名是自己的包名，不要写错了。 
    npm install plasma007-my-npm-test

  8. 创建一个test.js文件，引入包里的函数 

    import { printMsg } from 'plasma007-my-npm-test';

printMsg()

  9. 修改package.json文件里面的配置，添加一个启动脚本、修改文件类型为module 

    {
    ...,
    "script" : {
        "dev" : "node ./test.js"
    },
    "type" : "module"
    ...
}

  10. 执行脚本命令，控制台会输出This is a message from the demo package, 说明自己发布的包能够正常引入 

    npm run dev

// 显示
> dev
> node ./testnpm1.js

This is a message from the demo package

NPM进阶

package的README文件

  1. 该文件必须在包项目的根路径
  2. 该文件只能跟随包版本更新而更新

package的版本更新

npm version patch // 如果没有预发布号则直接升级小号，如果有预发布则直接去掉  
npm publish

package发布后的地址是https://npmjs.com/package/包名

添加忽略文件

  1. 方案1：采用白名单策略,在package,json中指定打包的文件，这样可以有效防止因为疏忽或者其它一些原因导致一些不想公开或者不必要的文上传到公开的仓库中 
{
    ...,
    "files": [    "/lib"  ]  //一定要在/，  不然会  */lib  都会被识别到
    ...
}
  1. 方案2：采用.npmignore文件添加忽略文件，指定的文件名将不会被打包，但是存在bug,有可能某些文件会被打包跟随发布而公开

script 脚本命令传参

向npm脚本传参需要在参数前加 -- ,然后JS脚本通过process.env.参数名来取值,eg:

// 执行脚本命令时，后面追加参数 name="plasma007"
npm run dev -- name="plasma007"
// 脚本文件中取出参数
let name = process.env.npm_config_name;

常见错误列表

1. 无法登录npm

使用npm login命令时，如果提示的信息是npm notice Log in on https://registry.npm.taobao.org/则登录时会报错, 这时我们需要将npm源切换回默认源，源切换命令如下：

// 切换回默认的npm源
npm config set registry https://registry.npmjs.org/
// 切换到淘宝源
npm config set registry http://registry.npm.taobao.org/
// 查看当前源
npm get registry
mytestnpm
@infinitebrahmanuniverse/nolb-plas@everything-registry/sub-chunk-2444@zalastax/nolb-plas
1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago