# webpack 打包库和组件

webpack 除了可以用来打包应用,也可以用来打包 js 库

实现一个大整数加法库的打包

  • 需要打包压缩版和非压缩版本
  • 支持 AMD/CJS/ESM 模块引入

# 库的目录结构和打包要求

目录结构

|-- dist                          // 打包后输出目录
	|--test.js					  // 未压缩版本	
	|--test.min.js				  // 压缩版本 	
|-- src                           // 源码目录
	|--index.js
|-- package.json                  
|-- index.js                      // 引入库的入口 
|-- webpack.config.js        	  // 打包配置	
1
2
3
4
5
6
7
8

支持使用方式

  • 可以直接通过 script 引入
  • 支持 AMD/CJS/ESM 模块引入

# 如何将库暴露出去

  • 大整数加法

    export default function add(a, b) {
        let i = a.length - 1;
        let j = b.length - 1;
    
        let carry = 0;
        let ret = '';
        while (i >= 0 || j >= 0) {
            let x = 0;
            let y = 0;
            let sum;
    
            if (i >= 0) {
                x = a[i] - '0';
                i --;
            }
    
            if (j >= 0) {
                y = b[j] - '0';
                j --;
            }
    
            sum = x + y + carry;
    
            if (sum >= 10) {
                carry = 1;
                sum -= 10;
            } else {
                carry = 0;
            }
            // 0 + ''
            ret = sum + ret;
        }
    
        if (carry) {
            ret = carry + ret;
        }
    
        return ret;
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
  • 打包配置脚本

    // webpack.config.js
    const TerserPlugin = require('terser-webpack-plugin');
    module.exports = {
        mode: 'none',
        entry: {
            test: './src/index.js',
            'test.min': './src/index.js'
        },
        output: {
            filename: '[name].js',
            library: 'Test', // 指定库的全局变量
            libraryExport: 'default',
            libraryTarget: 'umd' // 支持库的引入方式
        },
        optimization: {
            minimize: true,
            minimizer: [
                new TerserPlugin({
                    include: /\.min\.js$/,
                })
            ]
        }
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23

# 设置入口文件

  • package.jsonmain 字段为 index.js

    // index.js
    if (process.env.NODE_ENV === 'production') {
        module.exports = require('./dist/test.min.js');
    } else {
        module.exports = require('./dist/test.js');
    }
    
    1
    2
    3
    4
    5
    6
更新于: 2/10/2020, 11:14:21 AM