我们平时开发的业务代码中包含着大量的npm包，这些npm包的存在给我们带来极大的便利，比如我们直接安装Vue/React脚手架的npm。就可以帮我们快速搭建一个项目的基本结构和必要配置。使我们更加关注到业务本身。
基于此我们如何将业务代码中重复可提取可单独维护的部分(函数、业务组件……)封装成一个npm包呢？

一、初始化项目

1、mkdir project_name_components 2、cd project_name_components 3、npm init -y

二、写入内容

  1. 新建index.js作为入口文件,主要完成公共代码的导入导出功能
mkdir src cd src touch index.js
  1. 新建component来写入公共函数或者组件,主要用来写入相关公共代码并导出 | cd src mrdir component cd component mkdir component1/indx.js …… | | —- |

三、打包配置

touch webpack.config.js npm i webpack webpack-cli babel @babel-core @@babel/preset-env babel-loader clean-webpack-plugin

webpack.config.js配置如下：

‘use strict’; const path = require(‘path’); const glob = require(‘glob’); const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’); const getEntries = () => { const entry = {}; const entryFiles = glob.sync(path.join(dirname, ‘./src/component//index.js’)); Object.keys(entryFiles) .map((index) => { const entryFile = entryFiles[index]; const match = entryFile.match(/src\/component\/(.)\/index\.js/); const pageName = match && match[1]; entry[pageName] = entryFile; }); console.log(entry); return entry; } const entryObj = getEntries(); module.exports = { entry: Object.assign(entryObj, { index: ‘./src/index.js’}), output: { path: path.join(dirname, ‘lib’), filename: ‘[name]_[chunkhash:8].js’ }, mode: ‘production’, module: { rules: [ { test: /.js$/, use: [ ‘babel-loader’ ] } ] }, plugins: [ new CleanWebpackPlugin() ] }

执行打包结果如下：

为何采用这种多入口的打包方式？？
每个组件单独打包+一个总包的方式主要是考虑到一个痛点：这个npm包的大小是否是业务中的痛点，如果这个npm包过大则需要考虑按需加载， 这种多入口的方式便于在业务代码中进行按需加载，如果包很小，则不需要直接打一个总包即可。
修改package.json中的入口文件地址：

四、发布

像这种对业务代码封装写成的npm包一般都是发布到自己公司的镜像上，不会发布到npm官网上。但是不管哪种方式都需要账号密码登录之后执行npm publish.
注意点
每次发包的版本需要遵循semver语义化版本规范，每次npm的升级根据升级情况修改版本号之后再npm publish。但是如果本次发包设计核心功能或者比较大的feature改动时，最好先发布先行版本，如下：

  1. alpha: 内部版本
  2. beta: 公测版本
  3. rc: 正式版本的候选版本

版本号格式如下：
主版本号[MAJOR].次版本号[MINOR].修订号[PATCH]，版本号递增规则如下：

  1. 主版本号：当做了不兼容的 API 修改，
  2. 次版本号：当做了向下兼容的功能性新增，
  3. 修订号：当做了向下兼容的问题修正。

如果不知道如何修改可以直接使用指令:

  1. 升级补丁版本号：npm version patch
  2. 升级小版本号：npm version minor
  3. 升级大版本号：npm version major

    五、测试

    在业务代码里面先下载我们发布的npm包
npm i project_name_components -S import { Componnet1, Component2 } from ‘project_name_components’; 测试这个组件是否能正常工作。

如果需要考虑按需加载，则需要在业务代码中安装npm i babel-plugin-component -D 插件并在.babelrc添加以下配置:

{ plugins: [ [ ‘component’， { ‘library’: ‘project_name_components’, } ] ] }

测试按需加载可以吧project_name_components单独打包出来进行包体积大小的对比 。

六、总结

本文从一个简单的例子介绍了如何基于业务封装适合业务的npm包。希望对大家有帮助~

七、参考链接

https://zhuanlan.zhihu.com/p/66198702
https://www.npmjs.com/package/semver
https://zhuanlan.zhihu.com/p/80754775