使用webpack打包一个自己的基础库

这篇文章我以一个大数相加的简单实现，带大家了解一下怎么使用webpack打包自己的js库，这个包有几个基本的要求

  • 我们需要满足各个模块导入的规范
  • 在生产环境下，我们需要让使用者使用一个压缩后的版本，但是在开发环境下，使用没有被压缩过的版本
  • 使用者可以直接用 import largeNumber from 'large-number' 这个代码进行引用
  • 需要发布到 npm 上
  1. 首先我们新建一个 large-number 的文件夹
  2. 执行 npm init -y，生成package.json文件

  3. 新建 src 文件夹，在文件件夹下新建 index.js 文件，代码如下：

    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
    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
    }

  4. 根目录新建 webpack.config.js 文件，配置如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    const TerserPlugin = require('terser-webpack-plugin')
    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$/
                })
            ]
        }
    }

    根据这个包的需求，我们需要将代码打包为js和min.js两份代码，为了自己控制是否需要打包，所以引入了terser-webpack-plugin 这个插件，并且配置文件输出 libraryTarget为”umd”、libraryExport 为 “default”

  5. 为了区分开发环境与生产魂晶，我们需要在根目录新建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')
    }

  6. 我们需要配置package.json的main属性为 ‘index.js’,

  7. 最后我们执行 npm publish 命令即可将包发布到npm仓库，该操作需要登录自己的npm账号，这部分内容不做阐述，如果包的名称重复的话，修改即可