「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」。
前言
最近接到一个需求，要写一个SDK(我们称之为B)，虽然实现的业务不一样，但是打包构建却和之前写的SDK相近(称之为A)，于是我就想，能不能将A的工程项目改造一下，使其成为一个通用的项目，以满足以后其他可能出现的需求
分析
A 的目录结构
其实A是一个非常简单的项目，构建所做的仅有babel编译一下，然后就打包压缩，最后输出到指定目录就完成工作了
在第一版中工程目录结构如图：
B 的目录结构
这里假设我们要在这个项目的基础上开发B，那我们肯定得找个路径来存放B的文件，由于我们需要在打包的时候指定一个入口文件，所以有个统一存放业务的文件会方便管理 于是我们将项目文件统一存放在src内，并创建属于它们单独的文件
于是有了如图的目录结构：
webpack配置文件
但是我们可以看到，在webpack的配置文件中，入口文件依旧还是A项目时的入口 ./src/index.js
实际上我们需要打包A的时候引用 ./src/A/index.js 打包B的时候引用 ./src/B/index.js
打包构建完输出的最终文件亦是如此
packjson.json配置文件
首先来看一下A项目中，package.json中有哪些命令
也很简单明了，运行一下 npm run build 即可完成打包
我们在上面提到过，此时的构建仅针对A项目生效，因为打包入口文件写死了 ./src/index.js 显然我们需要从入口文件入手
实现
从上面的分析中，我们可以罗列出以下几点需要完成的工作：
- 入口文件的适配
- 最终打包文件存放位置的适配
不难看出，我们主要就是围绕着 不同项目文件的输入输出 展开工作，其中一个很关键的要素就是 区分项目来源
区分不同项目名
命令行参数 process.argv
process.argv属性返回数组,其中包含启动 Node.js 进程时传入的命令行参数。第一个元素将是 process.execPath。 第二个元素将是正在执行的 JavaScript 文件的路径。 其余元素将是任何其他命令行参数。(来自官方文档的摘录)
从这里我们可以看到，我们可以在命令行中传入自己想要的参数，这样就可以实现对不同项目传入不同的参数进而进行区分
于是我们可以改造一下构建命令并执行：
从官网描述可以看到，第一二个参数分别为node及项目路径。其余元素即是自己传入的命令参数，这样我们就可以通过 编写携带不同参数的命令，从而实现区分项目来源
打包构建
获取 process.argv
从上面截图中我们可以看到，我们已经在控制台将自定义入参的命令行参数打印出来了，既然打印出来了，自然也就可以获取
我们在 webpack.config.js配置文件中 获取时，一样是通过 process.argv 获取，且视其为一个数组即可。
我们再回忆一下B混入A项目之后的目录结构，我们将所有的项目都分别存放在 src文件夹 下，这时，我们只需要在编写入口和出口文件时，填上动态获取的项目名即可
然后每次打包构建不同项目时，只需执行对应的命令行即可
