如何在npm上发布你的package

在自己平时工作或者学习中，总结出来的模块，我们可以将其提炼发布到npm上，这样即使有多个项目使用这个包时，也能方便地进行更新。

我在把自己之前总结的模块发布到npm上时，遇到了几个问题，现在把刚才踩过的坑亮出来，方便大家能随时躲过去。

1. 使用rollup而不是webpack #

在我的模块里，只是使用几个简单的ES6语法，而且最终编译出来的代码要能在ES6, AMD, CMD中均能使用。针对这个简单的功能，就没必要使用webpack这么大的工具了，使用rollup即可，而且打包出来的额外代码还特别少。

rollup的配置也很简单，我们先看下package.json引用的模块：

{
  "name": "tencent-downapp",
  "version": "0.0.4",
  "description": "集成了微信、QQ、腾讯视频、QQ音乐和腾讯动漫等APP的api，用来打开和下载第三方的api",
  "main": "dist/bundle.js",
  "repository": "https://github.com/wenzi0github/tencent-downapp.git",
  "files": [
    "src",
    "dist/bundle.js"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rollup -c"
  },
  "author": "wenzi",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "rollup-plugin-babel": "^3.0.5",
    "rollup-plugin-node-resolve": "^3.3.0"
  }
}

rollup.config.js的配置内容：

import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';

const config = require( './package' );

const banner =
  '/*!\n' +
  ' * AppDownload v' + config.version + '\n' +
  ' * last update: ' + (new Date()).toLocaleDateString() + ', author: skeetershi\n' +
  ' * Released under the MIT License.\n' +
  ' */'

export default {
  entry: './src/index.js',
  plugins: [
    resolve(),
    babel({
      exclude: './node_modules/**',
      plugins: ['external-helpers']
    })
  ],
  output: {
    file: './dist/bundle.js',
    format: 'umd'
  },
  banner
};

这样就行了，执行npm run build后，就能在dist目录中看到编译后的文件。

2. 发布时忽略的内容 #

发布到npm上的包，默认是不上传node_modules文件夹中的内容的。同时呢，你还可以创建一个.npmignore文件，来确定更多的忽略文件和文件夹。
如果你的模块里还有.gitignore文件时，同样也会忽略这里面包含的文件和文件夹。

所以，通常编译后产生的目录（我这里的是dist目录），我们是不加入git追踪的，把dist目录添加到.gitignore中。可是这样也就上传不到npm上了，我们就需要在package.json中，添加一个files数组字段：

{
    "files":[
        "dist"
    ]
}

这样就能把dist目录中所有的文件内容都发布到npm上。当然，这里也可以写成单独的文件：

{
    "files": [
        "dist/bundle.js",
        "dist/bundle.min.js",
        "dist/bundle.esm.js"
    ]
}

3. 引用时，引用的是哪个文件 #

刚开始我有这样的一个疑惑，模块里这么多文件，当install完成后，require或者import文件夹时，用的是哪个文件呢，这里就需要在package.json中指定好即可：

{
    "main": "dist/bundle.js"
}