如何使用webpack打包一个基础库

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

要求

• 需要打包压缩版本和非压缩版本
• 支持AMD/CJS/ESM 模块引入,也可以通过script标签引入

库的目录

截屏2020-03-25上午6.55.30.png

如何把库暴露出去

截屏2020-03-25上午6.57.13.png

• library是指定库的全局变量
• libraryTarget是支持库的引入方式
• libraryExport要设置成default,否则引入就要使用xx.default,这样比较不方便

正式操作

生成项目,安装webpack

npm init -y
npm i webpack webpack-cli -D
npm i terser-webpack-plugin -D

创建文件目录

截屏2020-03-25上午7.10.12.png

编写代码逻辑

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 {
            caryy = 0;
        }

        ret = sum + ret;
    }

    if (carry) {
        ret = carry + ret;
    }

    return ret;
}

编写webpack.config.js

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
    // 如果为production会默认启用TerserPlugin压缩
    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$/
            })
        ]
    }
}

在根目录上新建一个index.js,判断引入的包

截屏2020-03-25上午7.34.02.png

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

发布到npm

前提是你要有npm的账号,然后登陆

npm publish