如何在npm上发布你的package

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

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

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

1. 使用rollup而不是webpack

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

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

COPYJSON

{ "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的配置内容:

COPYJAVASCRIPT

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数组字段:

COPYJSON

{ "files":[ "dist" ] }

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

COPYJSON

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

3. 引用时,引用的是哪个文件

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

COPYJSON

{ "main": "dist/bundle.js" }
标签:
阅读(705)

公众号:

qrcode

微信公众号:前端小茶馆

公众号:

qrcode

微信公众号:前端小茶馆