发布一个npm package
1. 创建一个package.json文件
发布到npm registry的包必须包含一个packge.json文件。
1. 必需name字段
要求:
1. 只能是一个单词,但是可以包含-或_
2. 只能是小写字母
2. 必需version字段
version字段必须遵循语义化版本规范。
每变更一次,就需要修改一次版本号;告知使用者变更的范围和程度。
语义化版本规范
说明 | 阶段 | 规则 | 示例 |
初次发布 | 新产品 | 从1.0.0开始 | 1.0.0 |
向后兼容的bug修复 | 发布补丁 | 增加第三个数字 | 1.0.1 |
向后兼容的新功能 | 次要发布 |
增加第二个数字,并且重置第三个数字 |
1.10 |
改变较大,和之前不兼容 | 主要发布 |
增加第一个数字,后面的重置 |
2.0.0 |
3. 可选description字段
便于在npm网站查找
4. 可选author字段
可以是邮箱或者网址
Your Name <email@example.com> (http://example.com)
5. 可选main字段
入口文件。如果该字段不存在,则默认查找对应目录下的index.js文件。如果两者都不存在,则会抛出异常。
6. 可选bin字段
可以实现全局命令。
全局命令本质上是将包安装到以下路径中
// 查看全局安装路径的命令$ npm root -g /usr/local/lib/node_modules
在package.json中设置bin字段{命令:被执行的文件路径},使用时lyra就是全局命令
"bin": { "lyra": "./index.js" }
被执行的文件(./index.js)头部必须添加指定运行环境的命令
#! usr/bin/env node
PS:如果当前安装包在本地,想要其实现全局命令的功能,可以在package.json所在的路径运行npm link命令,
npm link 将代码复制到全局环境位置,然后bin的命令成为全局命令
7. 可选scripts字段
可以自己配置执行脚本命令。
// 示例: "scripts": { "dev": "export a= 1 && node a.js" }, // 脚本可以通过npm run xxx(start/test可以省略run)
2. 创建一个package.json文件
1. npm init -y
// 也可以 npm init --yes
创建一个默认文件。然后在文件内修改。
如果是npm init
根据逐步回答问题,创建package.json.
还可以自定义package.json的文件内容和npm init的问题。
2. npm config set
如果想要在生成的package.json中添加一个个人信息等内容,则可以通过下面的命令进行配置;
完成之后,下次npm init -y时,会自动添加配置过的信息。
> npm config set init.author.email "example-user@example.com" > npm config set init.author.name "example_user" > npm config set init.license "MIT"
3. 创建自己的库代码
1. 逻辑代码
创建一个src文件夹,src中index.js写自己的逻辑代码,代码导出
示例:
function add(a, b) { return a + b; } function minus(a, b) { return a - b; } function multiply(a, b) { return a * b; } function divide(a, b) { return a / b; } export default { add, minus, multiply, divide }
2. 设置打包的配置信息
在webpack.config.js 中
const path = require('path'); const terserWebpackPlugin = require('terser-webpack-plugin'); module.exports = { mode: 'none', // 不能设置为production或者development,会引入很多默认设置 entry: { 'lyra': './src/index.js', 'lyra.min': './src/index.js' }, output: { filename: '[name].js', path: path.join(__dirname, 'dist'), library: 'lyralib', // 定义库的名称 libraryTarget: 'umd', //表示兼容所有的导出方式 /** * target有以下几种: * 1. var: 对应形式 var lyralib = {} * 2. commonjs: 对应的形式 exports['lyralib'] * 3. commonjs2: 对应的形式 module.exports = {} * 4. window: 对应的形式 window.lyralib = {} * 5. this: 对应的形式 this['lyralib] * 6. amd: 对应的形式是 define('lyralib', factory) */ libraryExport: 'default' // 指定要导出的属性 }, optimization: { minimize: true, minimizer: [ new terserWebpackPlugin({ test: /\.min\.js$/ }) ] } }
3. 定义入口文件
库发布后,使用时会首先查找main字段对应的文件,根目录下的index.js
if (process.env.NODE_ENV === 'production') { module.exports = require('./dist/lyra.min.js'); } else { module.exports = require('./dist/lyra.js'); }
4. 打包文件
npx webpack
4. 注册npm
进行操作前,先确认当前源是npm源。否则应该切换到npm源。
发布npm前需要登陆,如果初次使用,需要先注册:
npm adduser
密码要求复杂密码。
如果已经注册过, 则需要登陆:
npm login
查看是否登陆成功
npm who am i
5. 发布及失败原因
1. 发布
首先确保当前源是npm 的源,而不是第三方如cnpm的源。
npm publish
2. 失败原因查找
1. 确定package文件中name名称是否重复
2.确定邮箱是否已经验证
6.取消发布
npm unpublish XXX --force