Rollup从入门到入坑(3)发布到npm

严格来说，将包发布到npm并不是Rollup的事情，但发布到npm却是最容易实现代码复用的方法。

修改功能

将代码修改为计算目标时间距离当前时间大致时长的功能。代码如下

// src/main.js
import ms from 'ms';
import targettime from './targettime';
import millisecondUtil from './millisencondsUtil';

export default function howLongUntil(hours, minutes) {
// 当用户未进行输入时，默认的目标时间设置为午饭时间
    if (typeof hours === 'undefined') hours = 12;
    if (typeof minutes === 'undefined') minutes = 0;

    const millisecondsUntilTargetTime = millisecondUtil(targettime(hours, minutes));
    return ms(millisecondsUntilTargetTime, { long: true });
}

// src/targettime.js
export default function getTargettime (hours, minutes) {
    const targettime = new Date();

    targettime.setHours(hours);
    targettime.setMinutes(minutes);
    targettime.setSeconds(0);
    targettime.setMilliseconds(0);
// 当当前时间已经超过目标时间后,计算下一天的目标时间
    if (targettime < Date.now()) targettime.setDate(targettime.getDate() + 1);

    return targettime;
}

// src/millisencondsUtil.js
export default function milisecondsUtils(date) {
    return date - Date.now();
}

Rollup打包配置如下, 其中output选项中的name为umd模块导出的默认名字，是umd模块的必填项。

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import pkg from './package.json';

export default {
    input: 'src/main.js',
    output: {
        name: 'howLongUntil',
        file: pkg.main, // 引用package.json中的main
        format: 'umd'
    },
    plugins: [
        resolve(),
        commonjs()
    ]
}

package.json

{
  "name": "soda-howlongutil",
  "version": "1.0.0",
  "description": "A simple Time calculator",
  "main": "dist/how-long-till.js",
  "scripts": {
    "test": "test",
    "build": "rollup -c"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/sodatodo/soda-howLongUtil.git"
  },
  "keywords": [
    "npm",
    "test"
  ],
  "author": "soda",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/sodatodo/soda-howLongUtil/issues"
  },
  "homepage": "https://github.com/sodatodo/soda-howLongUtil#readme",
  "devDependencies": {
    "@rollup/plugin-commonjs": "^11.0.2",
    "@rollup/plugin-node-resolve": "^7.1.1",
    "ms": "^2.1.2",
    "rollup": "^2.0.3"
  }
}

执行npm run build，将umd模块打包出来。
到此为止，万事俱备，只需将模块发布到npm

登录npm

没有npm账户的需要到npm官网点击右上角的 Sign up自行注册。

确认当前使用镜像

一般国内用户在使用npm时会使用淘宝镜像，但发布npm包时需要使用npm的官方镜像，可以使用nrm来确认和选择镜像

# 安装 nrm
npm i -g nrm
# 列出所有镜像 其中带有 * 号的为当前使用的镜像
nrm ls
# 选择npm镜像
nrm use npm

登录npm

npm login
# Username: 输入npm的用户名
# Password: 输入npm的密码
# Email: (This is Public) 输入一个公开的邮箱

登录成功后会有提示

发布

npm publish

发布时有两点需要注意

name

package.json中的name为发布的npm包的名称，未来在使用npm安装包时，npm i <name>即可，name不可以与npm中已有的包重复

main

package.json中的main为项目解析的入口，若无此项，当你import时将无法正常的解析

Scope

全世界的人都可以想npm发布自己的包，因此包名很容易冲突，npm允许发布到Scope(不知道叫什么好，干脆不翻译)，用户可以使用自己的用户名(或组织名)发布程序包。
要发布到Scope只需将package.json中name修改为@<npm-name>/package-name
例如:

{
  "name": "@stacksoda/how-long-util",
  "version": "1.0.1",
  "description": "A simple Time calculator",
  "main": "dist/how-long-till.js",
  "scripts": {
    "test": "test",
    "build": "rollup -c"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/sodatodo/soda-howLongUtil.git"
  },
  "keywords": [
    "npm",
    "test"
  ],
  "author": "soda",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/sodatodo/soda-howLongUtil/issues"
  },
  "homepage": "https://github.com/sodatodo/soda-howLongUtil#readme",
  "devDependencies": {
    "@rollup/plugin-commonjs": "^11.0.2",
    "@rollup/plugin-node-resolve": "^7.1.1",
    "ms": "^2.1.2",
    "rollup": "^2.0.3"
  }
}

发布时使用命令

npm publish --access public

测试

使用create-react-app创建一个前端项目，将我们自己的包加入依赖

create-react-app npm-test
npm i -s @stacksoda/how-long-util # (根据实际情况输入)

// src/App.js
import React from 'react';
import howlong from '@stacksoda/how-long-util';

function App() {
  return (
    <div className="App">
      {howlong(12, 30)}
    </div>
  );
}

export default App;

本节结合Rollup将程序包发布到npm，以此便获得了一个随处可用的包，后面我们会逐步丰富Rollup的详细配置。