在自己平时工作或者学习中,总结出来的模块,我们可以将其提炼发布到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"
}