webpack打包组件和基础库

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

一个示例: 实现一个大整数加法库的打包
要求：

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

  1. 预想中实现目录

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    |-/dist
    	|- large-number.js
    	|- large-number-min.js
    |- webapck.config.js
    |- package.json
    |- index.js
    |- /src
    	|- index.js

    支持的使用方式
    - 支持ESM: import * as largeNumber from 'large-number'
    - 支持CJS: const largeNumber = require('large-number')
    - 支持AMD: require(['large-number'], function(large-number) {
    ...
    })

    largeNumber.add('999', '1')

  2. 功能实现
    思路：从最后一位累加，满10进位

    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
    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;
    		}
    		ret = sum + ret
    	}
      if(carry) {
        ret = carry + ret	
      }
      return ret
    }

  3. webpack打包
    说明：production模式下会自动压缩，将mode设置成none，再单独将.min.js压缩

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

  4. 设置入口文件
    说明： package.json的main字段为index.js

    1
    2
    3
    4
    5
    if (process.env.NODE_ENV === 'production') {
     	module.exports = require('./dist/large-number.min.js')
    } else {
    	module.exports = require('./dist/large-number.js')
    }