Wenzi

如何在npm上发布你的package

蚊子前端博客
发布于 2018/06/30 20:23
在自己平时工作或者学习中,总结出来的模块,我们可以将其提炼发布到npm上,这样即使有多个项目使用这个包时,也能方便地进行更新

在自己平时工作或者学习中,总结出来的模块,我们可以将其提炼发布到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"
}
标签:npmpackage
阅读(1041)
Simple Empty
No data