如何用webpack打包umd模块并测试打包效果

2019年8月31日 162次阅读 来源: magiconch

关于 JavaScript 的模块而言, webpack 能够用来build 基于浏览器或服务端的包.

下面让我们进修怎样运用webpack天生UMD.

起首须要全局装置webpack

npm install -g webpack

让我们先来竖立一个用来返回两数之和的加法模块.

// add.js
module.exports = function add(a, b) {
  return a + b;
};

接下来,我们来竖立webpack设置

// webpack.config.js
module.exports = {
  entry: './add.js',
  output: {
    filename: './dist/add.js',
    // export to AMD, CommonJS, or window
    libraryTarget: 'umd',
    // the name exported to window
    library: 'add'
  }
};

接下来运用webpack来build你的模块.

$ webpack
Hash: 87657f97293582af3ac3
Version: webpack 4.29.3
Time: 435ms
Built at: 02/22/2019 9:01:57 AM
   Asset      Size  Chunks             Chunk Names
./add.js  1.17 KiB       0  [emitted]  main
Entrypoint main = ./add.js
[0] ./add.js 83 bytes {0} [built

如今你能够来运用CommonJS, AMD, script tag这三种差别的体式格局来测试你的UMD包是不是准确了.

CommonJS

在测试之前,须要肯定是不是装置胜利Nodejs环境,

当你运用webpack打包的顺序中包含了挪用Window的内容时(比方操纵dom啥的),须要将commonJS转换成浏览器可辨认的代码.这一步有许多要领,就我而言,我引荐你运用browserify,
它的logo贼悦目,让我有种在写咒语的觉得.

而且也很好用,你只要在terminal下输入 browserify 想要转换的文件 > 天生文件,就能够天生能够在浏览器环境下运用的js啦.

假如你不想细致测试,也不想装browserify,另有一种偷懒的方法能够不完整的测试你的代码, 在nodejs环境下定义 global.window = {};,代码应当也能够运转.

$ node

> var add = require('./dist/add');
> add(1, 2);

AMD

AMD模块须要一个requirejs模块,我这里采纳的是在cdn上援用,你也能够把它下载下来,本身引入试一下.须要注重的是,假如本身援用的话,须要注重文件途径.

下载链接在这里

AMD (中文版)

<!-- amd.html -->
<html>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
  <script>
    window.requirejs(['dist/add'], function(add) {
      console.log(add(1, 2));
    });
  </script>
</body>
</html>

Script Tag

这个就是最简朴的全局暴露,没啥好说的.

<!-- script-tag.html -->
<html>
<body>
  <script src="./dist/add.js"></script>
  <script>
    console.log(window.add(1, 2));
  </script>
</body>
</html>

本文参考了Build to UMD with webpack@1

谢谢他救我于水火之中

    原文作者：magiconch
    原文地址: https://segmentfault.com/a/1190000018243783
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞