欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack 创建个人的第三方依赖library

程序员文章站 2024-01-22 19:13:46
...

webpack 创建个人的第三方依赖 library


导读

除了打包应用程序代码,webpack 还可以用于打包 JavaScript library,所以我们可以使用webpack很方便的打包我们的library项目
项目地址:https://github.com/RiversCoder/webpack-test

项目目录

  |- webpack.config.js
  |- package.json
  |- /node_modules
    |- … 
  |- /src
    |- index.js
    |- test.js

编辑index.js如下

实现时间格式化,以及随机字符串格式化的

import moment from 'moment';

// 时间格式化
export function formatTime(format){
  return moment(format)
}

// 随机字符串
export function randomString(len) {
  len = len || 32;
  var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
  var maxPos = $chars.length;
  var pwd = '';
  for (i = 0; i < len; i++) {
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return pwd;
}

编辑webpack.config.js如下

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'tool-format.js'
  }
};

尝试webpack打包编译,如下:

D:\me\npm\test\webpack-test\examples\case01_create_library>npx webpack
Hash: cfbdf2a67dbb5b12d27f
Version: webpack 4.34.0
Time: 1300ms
Built at: 2019-06-27 12:02:54 PM
         Asset     Size  Chunks             Chunk Names
tool-format.js  233 KiB       0  [emitted]  main
Entrypoint main = tool-format.js
[128] ./src/index.js 449 bytes {0} [built]
[129] (webpack)/buildin/module.js 497 bytes {0} [built]
[130] ./node_modules/[email protected]@moment/locale sync ^\.\/.*$ 3 KiB {0} [optional] [built]
    + 128 hidden modules

在这里我我们可以观察得到,编译出来的tool-format.js文件大小为233KB,过于太大,所以我们需要外部化我们的依赖包moment

修改webpack.config.js配置如下

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'tool-format.js'
  },
  externals: {
     moment: {
       commonjs: 'moment',
       commonjs2: 'moment',
       amd: 'moment',
       root: 'moment'
     }
   }
};

再次打包打印如下

D:\me\npm\test\webpack-test\examples\case01_create_library>npx webpack
Hash: f841a905ae2ec1909b3e
Version: webpack 4.34.0
Time: 921ms
Built at: 2019-06-27 1:33:24 PM
         Asset      Size  Chunks             Chunk Names
tool-format.js  1.25 KiB       0  [emitted]  main
Entrypoint main = tool-format.js
[0] external {"commonjs":"moment","commonjs2":"moment","amd":"moment","root":"moment"} 42 bytes {0} [built]
[1] ./src/index.js 449 bytes {0} [built]

现在这次打包的大小,已经有1.25KB

暴露我们自定义的 library

修改webpack.config.js如下展示:

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'tool-format.js',
    library: 'toolFormat',
    libraryTarget: 'umd'
  },
  externals: {
     moment: {
       commonjs: 'moment',
       commonjs2: 'moment',
       amd: 'moment',
       root: 'moment'
     }
   }
};

再次打包编译如下:

D:\me\npm\test\webpack-test\examples\case01_create_library>npx webpack
Hash: d867325bd7fc46b67a68
Version: webpack 4.34.0
Time: 938ms
Built at: 2019-06-27 3:50:06 PM
         Asset      Size  Chunks             Chunk Names
tool-format.js  1.52 KiB       0  [emitted]  main
Entrypoint main = tool-format.js
[0] external {"commonjs":"moment","commonjs2":"moment","amd":"moment","root":"moment"} 42 bytes {0} [built]
[1] ./src/index.js 449 bytes {0} [built]