在工作时，突然接到经理的一个要求，需要将一个react的高阶组件函数封装成一个npm包。之前从没弄过，当场还是有些懵逼的，但是这毕竟是工作，不能推脱。于是开始了学习、汤坑之旅。最终包发布，线上项目成功使用，虽然导致了一次线上故障，但还是快速地fix掉。吃一堑长一智，记录一下整个发布的过程和遇到的一些问题。
二 流程npm 包可以将可复用逻辑封装成一个工具库，依赖 npm 的强大生态，可以在项目中引入，让代码变得更加简洁，提高效率。
在 npm 官网注册一个账号。
在本地登录 npm 账号。
编写 npm 包内容。
发布包。
三 开发过程 1 注册npm账号。附录网站： https://www.npmjs.com/ 2 在本地登录npm账号。 npm login输入在npm官网注册的账号密码即可。
3 编写npm包 3.1 执行以下命令，创建一个npm模块 mkdir npmDir cd npmDir npm init -y 3.2 安装webpack npm install webpack webpack-ci -D在本地开发时，通常考虑更多的是代码的可读性，以便于在逻辑出错时，可debug其源码找到问题。然而发至线上时，则考虑更多的是包的体积，越小即代表着更快的载入。
同时，一个强大的包应该支持多种方式导入，例如es module的import,commonjs的require以及amd的古老方式。
为做到以上两点，选择了webpack作为构建工具。虽然用webpack个人感觉稍微有点重，但是它可扩展性强，日后利用loader以及plugin可以实现更多的编译以及优化需求。
src下的index.js对应着包的内容。
最外层index.js为所暴露的出口文件。
dist目录存放webpack打包后的文件。
mode 为支持开发版代码不压缩，线上版本压缩。此处将mode设置为'none'，默认全不压缩，然后自己用插件来配置压缩代码文件。
entry设置两个入口，add为在开发时导入，add.min文件为在线上时导入。
output设置。
filename: 设置占位符。默认为entry入口文件名字
library: 库的返回值赋值给变量或者属性 add。例如script引入方式，则可以全局使用add函数。此属性和library配合使用
libraryTarget: 变量暴露的方式。设置为umd即可支持es module、cmd以及script引入脚本的方式使用。
libraryExport: 配置要导出的模块中那些子模块需要被导出。只有output.libraryTarget被设置成commonjs或者commonjs2的时候才有效。我的导出方式是export default，因此我将其直接导出。如果不填此项，则默认引入的是module对象。调用方式会是 .default形式。
optimization设置
利用TerserPlugin插件进行压缩代码,默认只压缩.min结尾的输出文件。
简单的一个测试函数
根据环境变量自动引入相关版本。
发布包时可以手动执行build命令后后发布，也可通过prepublish钩子自动编译然后发布。
修改 package.json 中的name字段，即包在npm中的名字。小提示，想好名字之后，最好到npm官网上搜索一下这个包有没有被别人注册，有的话就要换一个了。
修改版本号，可手动修改，也可通过npm version命令进行更换。个人习惯于后面。
然后在npm官网上搜索一下，便可以找到你发布的包了。开心。
四 遇到的问题 4.1 在服务端渲染(ssr)的项目中引入该包时，会报错误 ”window is not defined“本以为是包中代码逻辑错误，把项目中所有引入到window的地方全都用typeof兼容了一遍，本想完事大吉，结果还是报这个错误。上网搜索各种帖子无效之后，我感觉是webpack编译打包后出了问题，于是报着试一试的心态去看编译后的未压缩版本代码，果然发现了问题。
如图所示，打包后的文件为一个自运行匿名函数，函数第一个实参竟然是window。
于是去webpack官网查看相关文档，看其是否能配置。果然找到了
修改globalObject属性，将第一个参数设置为this，解决问题。
附录
gihub: https://github.com/ShengGaoW/shenggao-test-npm