npm 发布工具包

简单步骤介绍

1. 按照目录结构创建相应文件；

2. 添加 src 代码逻辑；

3. 简单配置 rollup.config.js 的编译入口和出口；

4. 配置 package.json & .gitignore 文件

5. npm i & npm run build 安装依赖和打包

6. 发布到npm上（要先注册账号哦～）

PS：实际项目中可采用 npm init 、vue-cli 等创建编译打包项目后发布，本文主要是为了学习如何发布 npm 包而写的简单示例。

先上目录结构

.
├── .gitignore
├── package.json
├── rollup.config.js
└── src
    ├── date.js
    ├── os.js
    └── main.js

src

// date.js
function dateHandle(flag) {
  console.log(`${flag} --- test`);
}

export default {
  dateHandle
}

// os.js
function osHandle(flag) {
  console.log(`${flag} --- test`);
}

export default {
  osHandle
}

// main.js
import dateUtils from './date';
import osUtils from './os';

export {
  dateUtils,
  osUtils,
};

rollup.config.js

// 这里借助 rollup 编译打包
// https://www.rollupjs.com/
export default {
  input: 'src/main.js',
  output: {
    file: 'main.js',
    format: 'cjs'
  }
}

package.json

{
  "name": "package-name",
  "version": "0.0.1",
  "description": "测试测试测试",
  "author": "xxxxxx",
  "private": false,
  "license":"MIT",
  "main":"main.js",
  "scripts": {
    "build": "rollup --config"
  },
  "dependencies": {
    "rollup": "^2.18.1"
  }
}

.gitignore

.DS_Store
node_modules

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

相关执行命令

# 编辑好上述代码后
npm i

# build
npm run build

# 发布到npm
npm login
npm publish

# 给npm添加权限
npm owner add username packagename
...