发布自己的npm包

一、首先要有一个需求~

前一段时间正好写到一个小的demo工具。

需求是这样的：
项目越来越大的情况下，使用fis每次编译的时间比较长，需要将编译过程改成增量编译，让每次编译都是去编译变化的活动。由于编译工作是fis完成的，最终需要我做的去实现只是一个获取发生变化的文件的工具方法。

在要做这个小工具之后，我们就可以把它做成一个简单npm包，来实现下npm的发布过程

先展示下需求的具体实现

思路是：既然要获取发生变化的文件夹，那么一定要知道原先文件夹合集，和当前文件夹合集，并比较下他们的md5值就可以判断出发生变化的文件夹，筛选出来其中发生变化的传递给编译工具就完成啦

 

// 需要用的npm包
import fs from 'fs'
import glob from 'glob'
import dirsum from 'dirsum'

/**
 * 文件夹路径 --> 文件夹md5
 * @param {String} dirPath 文件夹路径
 * @return {Promise} 
 */
function dirsum_md5 (dirPath) {
    return new Promise(function (resolve, reject) {
        dirsum.digest(dirPath, 'md5', function (err, hashes) {
            resolve(err ? '' : hashes.hash)
        })
    })
}

/**
 * 获取glob锚点路径 对应的 文件夹对象合集
 * @param {String} anchor 锚点文件的glob路径
 * @return {Array} 文件夹对象的合集
 */
export function toGetProjectDirs (anchor = 'src/**/build.this'){
    // 锚点文件的文件名
    let anchor_file_name = anchor.split('/').slice(-1);
    return Promise.all(glob.sync(anchor).map(async function (projectFile) {
        // 锚点文件 --> 文件夹路径
        let path = projectFile.match('^(.*?)'+anchor_file_name)[1]
        // 文件夹路径 --> 文件夹md5
        let md5 = await dirsum_md5(path)
        // 封装成对象
        return {path,md5}
    }))
}

/**
 * 比较文件夹变化
 * @param {Array} preDirs 旧文件夹对象的合集
 * @param {Array} nowDirs 新文件夹对象的合集
 * @return {Array} 注意：返回的是新文件夹数组的子集
 */
export function toCompareChange (preDirs,nowDirs){
    return nowDirs.filter(function(nowDir){
        let dirs = preDirs.filter(function(preDir){
            return preDir.path === nowDir.path
        })
        return nowDir.md5 !== (dirs.length > 0 ? dirs[0].md5 : '')
    })
}

有了上面的代码就可以实现当前需求，接下来要做的是把上面的代码发布出去，让其他人都可以使用

二、然后一些准备工作

想要发布npm，首先要有一个npm账号

因为你的包是要放在npm上的，所以，没有npm的账号，根本什么活都干不了。
在npm上注册一个账号是很简单的，随便填一下用户名密码邮箱，然后人家就会发个邮件给你，然后就注册成功了。

然后你就可以使用npm publish来发布npm包了，当然首次发布的时候要登录。

输入完用户名，密码，邮箱后没有错误信息就完成了。

$ npm adduser
Username: your name
Password: your password
Email: (this IS public) your email

　　查询或者登陆别的用户命令

$ npm whoami
$ npm login

 

npm init

创建一个文件夹，进入之后执行npm init，之后这个文件夹就是你要发布工具的文件夹了。

然后把刚才写好的代码放到文件夹中，这样基本的准备工作就做好了

记得npm install使用到的包

还有就是记得写README.md文件，要不然别人根本不知道你的工具是干什么的和如何去使用。

三、开始发布啦

打包代码

发布的要先对代码进行打包一下，当然你也可以忽略这一步，直接将代码发布出去。
但是！！现在的前端模块规范是越来越多了，所以如果不对自己的代码进行处理的话，别人那道基本是用不了的。

对于npm包的打包，这里推荐使用rollup

理由吗，就是简单、高效、全面。

举个简单的rollup配置文件的例子，执行rollup -c就可以实现编译。

export default {
    input: 'src/index.js',
    plugins: [ 
      
    resolve({
        jsnext: true,  // 该属性是指定将Node包转换为ES2015模块
        // main 和 browser 属性将使插件决定将那些文件应用到bundle中
        main: true,  // Default: true 
        browser: true // Default: false
    }),
    commonjs({
    }),
    json(),
    babel({
        exclude: 'node_modules/**',  // 排除node_modules 下的文件
        runtimeHelpers: true
    }),
    // replace({
    //     include: 'src/index.js', // 指定可以使用变量的文件路径
    //     exclude: 'node_modules/**',
    //     ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
    //     HOST: JSON.stringify('http://111/111')
    // })
   ],
    output: [{
      file: 'dist/index.js',
      name:'SongPackage',
      format: 'umd'
    },{
      file: 'dist/index.es.js',
      format: 'es'
    },{
      file: 'dist/index.amd.js',
      format: 'amd'
    },{
      file: 'dist/index.cjs.js',
      format: 'cjs'
    }]
};

这样就会把常用的模块规范都编译出来了

下面我们看下各个模块规范编译出来的效果是

// 假设源文件代码
export default {};

// AMD
define(function () { 'use strict';
  var index = {};
  return index;
});

// CommonJS
'use strict';
var index = {};
module.exports = index;

// ES6
var index = {};
export default index;

// UMD 通用 闭包
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.amd ? define(factory) :
    (global.SongPackage = factory());
}(this, (function () { 'use strict';
var index = {};
return index;
})));

默认可以设置指向UMD，用户也可以根据自己的项目选择其他的引入。

终于进入要发布了

module开发完毕后，剩下的就是发布啦，进入项目根目录，输入命令。

首先要设置一个版本号

npm社区版本号规则采用的是semver（语义化版本），主要规则版本格式：主版本号.次版本号.修订号，版本号递增规则如下：

主版本号：当你做了不兼容的 API 修改，
次版本号：当你做了向下兼容的功能性新增，
修订号：当你做了向下兼容的问题修正。
先行版本号及版本编译信息可以加到“主版本号.次版本号.修订号”的后面，作为延伸。

$ npm publish

这里有时候会遇到几个问题

问题1：

npm ERR! no_perms Private mode enable, only admin can publish this module:

这里注意的是因为国内网络问题，许多小伙伴把npm的镜像代理到淘宝或者别的地方了，这里要设置回原来的镜像。

$ npm config set registry=http://registry.npmjs.org

问题2：

npm ERR! you do not have permission to publish "your module name". Are you logged in as the correct user?

　　提示没有权限，其实就是你的module名在npm上已经被占用啦，这时候你就去需要去npm搜索你的模块名称，如果搜索不到，就可以用，并且把package.json里的name修改过来，重新npm publish，看到如下信息就表示安装完成了，songpackage就是我的模块名。

+ songpackage@0.1.0

 

更新版本，发布

$ npm version 0.1.1
$ npm publish