webpack进阶篇（二十五）：webpack打包组件和基础库

最新推荐文章于 2024-04-15 22:54:40 发布

凯小默

最新推荐文章于 2024-04-15 22:54:40 发布

阅读量2k

点赞数

分类专栏： Webpack / Rollup / Vite 文章标签： webpack

本文链接：https://blog.csdn.net/kaimo313/article/details/107849282

版权

Webpack / Rollup / Vite 专栏收录该内容

78 篇文章 28 订阅

订阅专栏

webpack 打包库和组件

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

接下来我们实现⼀个⼤整数加法库的打包

需要打包压缩版和⾮压缩版本
⽀持 AMD/CJS/ESM 模块引⼊

库的录结构和打包要求

打包输出的库名称:

未压缩版 large-number.js
压缩版 large-number.min.js

+ |- /dist
+   |- large-number.js
+   |- large-number.min.js
+ |- webpack.config.js
+ |- package.json
+ |- index.js
+ |- /src
+   |- index.js

支持的使用方式

1、⽀持 ES module

import * as largeNumber from 'large-number';
// ...
largeNumber.add('999', '1');

2、⽀持 CJS

const largeNumbers = require('large-number');
// ...
largeNumber.add('999', '1');

3、⽀持 AMD

require(['large-number'], function (large-number) {
// ...
largeNumber.add('999', '1');
});

4、可以直接通过 script 引⼊

<!doctype html>
<html>
...
<script src="https://unpkg.com/large-number"></script>
<script>
// ...
// Global variable
largeNumber.add('999', '1');
// Property in the window object
window.largeNumber.add('999', '1');
// ...
</script>
</html>

如何将库暴露出去？

library: 指定库的全局变量

libraryTarget: ⽀持库引⼊的⽅式

module.exports = {
    mode: "production",
    entry: {
        "large-number": "./src/index.js",
        "large-number.min": "./src/index.js"
    },
    output: {
        filename: "[name].js",
        library: "largeNumber",
        libraryExport: "default",
        libraryTarget: "umd"
    }
};

如何指对 .min 压缩

通过 include 设置只压缩 min.js 结尾的⽂件

module.exports = {
    mode: "none",
    entry: {
        "large-number": "./src/index.js",
        "large-number.min": "./src/index.js"
    },
    output: {
        filename: "[name].js",
        library: "largeNumber",
        libraryTarget: "umd"
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                include: /\.min\.js$/,
            }),
        ],
    }
};

设置入口文件

package.json 的 main 字段为 index.js，根目录新增index.js文件

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

实战开发

1、初始化项目

mkdir large-number

cd large-number

npm init -y

npm i webpack webpack-cli -D

2、创建src/index.js，在里面实现大整数加法功能


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

// add('999', '1');
// add('1', '999');
// add('123', '321');
// console.log(add('999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999', '1'));

3、创建webpack.config.js

需要安装插件：npm i terser-webpack-plugin -D

“terser-webpack-plugin”: “^1.3.0”，4.0会报错

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

module.exports = {
  entry: {
    'large-number': './src/index.js',
    'large-number.min': './src/index.js'
  },
  output: {
    filename: '[name].js',
    library: 'largeNumber',
    libraryTarget: 'umd',
    libraryExport: 'default'
  },
  mode: 'none',
  optimization: {
    minimize: true,
    minimizer: [
        new TerserPlugin({
            include: /\.min\.js$/,
        }),
    ],
  }
}

打包的效果就实现了压缩

在这里插入图片描述

4、设置入口文件

根目录新增index.js文件

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

package.json的配置，里面添加了prepublish的处理

{
  "name": "large-number",
  "version": "1.0.0",
  "description": "大整数加法打包",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "prepublish": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "terser-webpack-plugin": "^1.3.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

5、发布npm包，包名需要更改，我这边用了kaimo-large-number

具体可以参考我的另一篇笔记

怎么将自己的写的库发布到npm上面？

6、使用自己的npm包

首先在我们的业务安装npm i kaimo-large-number -S

在这里插入图片描述

然后在业务代码里面使用’kaimo-large-number’

import React from 'react';
import ReactDOM from 'react-dom';
import './search.less';
import logo from './images/logo.png';
console.log(logo);
import '../../common/index.js';
import { kaimo666 } from './tree-shaking.js';
// 引入大加法
import kaimoLargeNumber from 'kaimo-large-number';


class Search extends React.Component {

  constructor() {
    super(...arguments);

    this.state = {
      Text: null
    }
  }

  loadComponent() {
    // 动态加在text.js，返回一个promise
    import('./text.js').then((Text) => {
      console.log(Text);
      this.setState({
        Text: Text.default
      });
    })
  }

  render() {
    const kaimo = kaimo666();
    const { Text } = this.state;
    const kaimoLarge = kaimoLargeNumber('777', '666');
    return <div className="search-text">
      { kaimo }
      凯小默的博客666
      { Text ? <Text /> : null }
      大加法操作'777'+'666'：{ kaimoLarge }
      <img src={ logo } onClick={ this.loadComponent.bind(this) } />
    </div>
  }
}

ReactDOM.render(
  <Search/>,
  document.getElementById('root')
)

页面效果：

在这里插入图片描述

如果你npm run build的出现下面问题：说明你发布的包有问题没有把dist目录包含进来，去除你git忽略文件里的dist，你需要更新你的包

在这里插入图片描述

找到自己库的.gitignore文件，去掉dist

在这里插入图片描述

凯小默

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
webpack进阶篇（二十五）：webpack打包组件和基础库

webpack 打包库和组件webpack 除了可以⽤来打包应⽤，也可以⽤来打包 js 库。接下来我们实现⼀个⼤整数加法库的打包需要打包压缩版和⾮压缩版本⽀持 AMD/CJS/ESM 模块引⼊库的录结构和打包要求打包输出的库名称:未压缩版 large-number.js压缩版 large-number.min.js+ |- /dist+ |- large-number.js+ |- large-number.min.js+ |- webpack.config.js+
复制链接

扫一扫