npm 发包

发布库或者组件到npm组织中

1. 注册npm账号： npm adduser (命令行形式， 或可直接到npm官网可视化注册操作);
2. 发布npm库/组件： npm publish;
3. npm 发包遇到的问题

发布的npm包使用方式

npm依赖调用形式

// npm i @czj/pack -D
import PackFn from '@czj/pack';
PackFn(12, 812); // result: 800

CDN引入调用形式 -- 通过 jsdelivr

格式: https://cdn.jsdelivr.net/npm/(your packagename)@(version)/(file)
示例:

<script src="https://cdn.jsdelivr.net/npm/czj-pack@1.0.0/dist/pack.min.js"></script>
// 库名 Pack。（由发布的包中的webpack.config.js中的library字段定义）
Pack(12, 812); // result: 800

@czj/pack 源码demo

// .src/index.js
export default function (a, b) {
    if (typeof a === 'string' || typeof b === 'string') {
        return `${a} ----* has string *---- ${b}`;
    } else if (typeof a === 'number' && typeof b === 'number') {
        return Math.max(a, b) - Math.min(a, b);
    } else {
        return 'In me the tiger sniffs the rose!';
    }
}

// .babelrc
{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react" // 解析react文件
    ], // 一系列babel plugins的集合

    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "corejs": 3
            }
        ]
    ]
}

// ./index.js
if (process.env.NODE_ENV === 'production') {
    module.exports = require('./dist/pack.min');
} else {
    module.exports = require('./dist/pack');
}

{
    "name": "@czj/pack",
    "version": "1.0.0",
    "description": "",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "rm -rf ./dist && webpack"
    },
    "keywords": [
        "testNpmPackageBuild"
    ],
    "author": "Jan",
    "license": "ISC",
    "main": "index.js",
    "devDependencies": {
        "@babel/plugin-transform-runtime": "^7.16.4",
        "@babel/preset-env": "^7.15.8",
        "@babel/preset-react": "^7.16.0",
        "autoprefixer": "^10.4.0",
        "babel-eslint": "^10.1.0",
        "babel-loader": "^8.2.3",
        "clean-webpack-plugin": "^4.0.0",
        "html-webpack-plugin": "^4.5.2",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "terser-webpack-plugin": "^4.2.3",
        "webpack": "^4.46.0",
        "webpack-cli": "^4.9.1",
        "webpack-dev-server": "^4.4.0"
    },
    "dependencies": {
        "@babel/runtime": "^7.15.4",
        "@babel/runtime-corejs3": "^7.15.4"
    }
}

// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    mode: 'none',
    entry: {
        pack: './src/index.js',
        'pack.min': './src/index.js',
    },
    output: {
        // path: path.join(__dirname, 'dist'),
        filename: '[name].js',
        library: 'Pack', // 库名
        libraryTarget: 'umd',
        libraryExport: 'default', // 不做此行设置，包的调用方式为packTest.default
    },
    // exclude: /node_modules/,
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: [
                    'babel-loader',
                    // 'eslint-loader',
                ]
            },
        ]
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                include: /\.min\.js$/
            }),
        ],
    },
    plugins: []
}

版本管理

• 手动修改： package.json 中的 version 字段
• 命令行操作

  npm 采用了 semver 规范作为依赖版本管理方案。semver 约定一个包的版本号必须包含3个数字
  
  MAJOR.MINOR.PATCH 意思是 主版本号.小版本号.修订版本号
  
  1. MAJOR 对应大的版本号迭代，做了不兼容旧版的修改时要更新 MAJOR 版本号
  2. MINOR 对应小版本迭代，发生兼容旧版 API 的修改或功能更新时，更新 MINOR 版本号
  3. PATCH 对应修订版本号，一般针对修复 BUG 的版本号
  
  npm version major # 大版本号加 1，其余版本号归 0
  npm version minor # 小版本号加 1，修订号归 0
  npm version patch # 修订号加 1

先行版本号

先行版本好号可以作为发布正式版之前的版本，格式在修订版本号之后加上一个连接号（-），再加上一连串的以点（.）分割的标识符，标识符可以由英文、数字和连接号（[0-9A-Za-z-]）组成。

• alpha： 内部测试版，一般不向外发布，存在很多bug，一般只测试人员使用
• beta： 测试版，这个阶段的版本会一直加入新的功能，在Alpha版之后推出
• rc： 候选版本（Release-Candidate），RC版不会再加入新的功能，主要着重于除错。

参考阅读：
打包发布到NPM并通过CDN访问
前端项目打包版本维护命令 npm version 完全解析