使用webpack构建并发布npm包由于业务中经常使用到省市列表的树结构，经常对树结构进行各种各样的转换，所以想封装一个

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情 >>

由于业务中经常使用到省市列表的树结构，经常对树结构进行各种各样的转换，所以想封装一个工具包，一劳永逸。在制作真正的包前肯定要先写个玩具包测试可行性，同时测试使用umd的模式来打包，兼容amd、cjs、esm规范的情况。所以就有了test-npm-publish-yyx这个测试包，顺便记录一下 npm 工具包的整个开发流程

开发目标

在开始之前，我给这个玩具包定了以下几个目标：

实现两数加法功能
支持压缩打包和非压缩打包
支持 esm、cjs、amd 模块引入

开始实践！

创建项目并实现功能

# 创建文件夹
mkdir test-npm-publish-yyx
# 创建package.json
npm init -y
# 安装webpack
npm i webpack webpack-cli -D

然后创建以下目录结构

-src
  -addNumber.js
-index.js
-webpack.config.js

在src/addNumber.js中添加以下代码

export default function add(a, b) {
  return a + b;
}

以上代码实现了最简单的两数之和方法，接下来配置 webpack，在webpack.config.js添加以下配置：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'none',
  entry: {
    'add-number': './src/addNumber.js',
    'add-number.min': '/src/addNumber.js',
  },
  output: {
    filename: '[name].js',
    globalObject: 'this',
    libraryTarget: 'umd', //支持库的引入方式
    libraryExport: 'default', //默认导出
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        //此插件在webpack4之后，当mode 设置为production时，默认开启压缩
        include: /\.min\.js$/, //匹配min.js结尾的文件进行压缩
      }),
    ],
  },
};

然后，就可以在package.json里添加打包命令和外部访问的入口文件了

{
+ "main": "index.js",
  "scripts": {
+   "build": "npx webpack --config webpack.config.js"
  },
}

index.js的内容是通过判断环境变量实现不同文件的导出，代码如下

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