环境筹备

装置 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 工具执行以下命令，创立一个新文件夹, 并切换到该目录下

   mkdir npmtest
   cd npmtest

2. 执行 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
   */

3. 执行完初始化命令后，在我的项目目录文件中会呈现一个 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"
    }

4. 此时的目录树结构如下：

   ├─npmtest
   |  ├─package.json

5. 通过这个过程，咱们能够看到应用 npm 包对我的项目进行包装其实是非常简单的，治理也是非常简单，对依赖的治理也很简略，只有一个 package.json 文件。

   二、配置根本用户信息

6. 设置初始化默认的用户名、邮箱、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"

7. 咱们当初能够应用 npm init -y 命令进行疾速的初始化了

    npm init -y

8. 咱们能够看到在 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 我的项目，当初咱们则来创立并公布本人的包。

9. 创立一个文件夹，并关上该门路，这里倡议文件夹名称与包名保持一致（要公布的包不能重名，这里应该取一个不同凡响的包名来替换plasma007-my-npm-test）

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

   此时的目录树结构：

   ├─plasma007-my-npm-test
   |

10. 创立一个简略的脚本文件 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

11. 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
    

12. 初始化我的项目胜利后提醒相干信息已写入 /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

13. 如果还没有登录 npm 账号，则须要先登录，如果登录失败有可能是后文中 常见问题列表 1. 无奈登录 npm的状况，可依照外面的办法解决。

    npm login
    // 按提醒输出用户名和明码，明码输出时不显示
    Username: plasma007 // 别离输出本人的账号密码
    Password:

14. 将写好的包公布

    npm publish 
    // npm 会提醒很多信息，如果最初没报错 且最初一行是 + xxxx@1.0.0 就代表公布胜利了

15. 接下来验证一下本人的包是否已胜利公布。在另外的目录下创立新的目录, 并关上

    mkdir testnpm
    cd ./testnpm

16. npm 装置方才公布的包 npm install + 包名，包名是本人的包名，不要写错了。

    npm install plasma007-my-npm-test

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

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

18. 批改 package.json 文件外面的配置，增加一个启动脚本、批改文件类型为module

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

19. 执行脚本命令，控制台会输入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  都会被辨认到
    ...
   }

2. 计划 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