zoukankan      html  css  js  c++  java
  • 发布自己的npm包

    一、首先要有一个需求~

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

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

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

    先展示下需求的具体实现

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

     1 // 需要用的npm包
     2 import fs from 'fs'
     3 import glob from 'glob'
     4 import dirsum from 'dirsum'
     5 
     6 /**
     7  * 文件夹路径 --> 文件夹md5
     8  * @param {String} dirPath 文件夹路径
     9  * @return {Promise} 
    10  */
    11 function dirsum_md5 (dirPath) {
    12     return new Promise(function (resolve, reject) {
    13         dirsum.digest(dirPath, 'md5', function (err, hashes) {
    14             resolve(err ? '' : hashes.hash)
    15         })
    16     })
    17 }
    18 
    19 /**
    20  * 获取glob锚点路径 对应的 文件夹对象合集
    21  * @param {String} anchor 锚点文件的glob路径
    22  * @return {Array} 文件夹对象的合集
    23  */
    24 export function toGetProjectDirs (anchor = 'src/**/build.this'){
    25     // 锚点文件的文件名
    26     let anchor_file_name = anchor.split('/').slice(-1);
    27     return Promise.all(glob.sync(anchor).map(async function (projectFile) {
    28         // 锚点文件 --> 文件夹路径
    29         let path = projectFile.match('^(.*?)'+anchor_file_name)[1]
    30         // 文件夹路径 --> 文件夹md5
    31         let md5 = await dirsum_md5(path)
    32         // 封装成对象
    33         return {path,md5}
    34     }))
    35 }
    36 
    37 /**
    38  * 比较文件夹变化
    39  * @param {Array} preDirs 旧文件夹对象的合集
    40  * @param {Array} nowDirs 新文件夹对象的合集
    41  * @return {Array} 注意:返回的是新文件夹数组的子集
    42  */
    43 export function toCompareChange (preDirs,nowDirs){
    44     return nowDirs.filter(function(nowDir){
    45         let dirs = preDirs.filter(function(preDir){
    46             return preDir.path === nowDir.path
    47         })
    48         return nowDir.md5 !== (dirs.length > 0 ? dirs[0].md5 : '')
    49     })
    50 }

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

    二、然后一些准备工作

    想要发布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







  • 相关阅读:
    bzoj-2748 2748: [HAOI2012]音量调节(dp)
    bzoj-2338 2338: [HNOI2011]数矩形(计算几何)
    bzoj-3444 3444: 最后的晚餐(组合数学)
    codeforces 709E E. Centroids(树形dp)
    codeforces 709D D. Recover the String(构造)
    codeforces 709C C. Letters Cyclic Shift(贪心)
    codeforces 709B B. Checkpoints(水题)
    codeforces 709A A. Juicer(水题)
    Repeat Number
    hdu 1003 Max Sum (动态规划)
  • 原文地址:https://www.cnblogs.com/jason-hhc/p/11490617.html
Copyright © 2011-2022 走看看