如何用webpack打包umd模塊並測試打包結果

時間 2019-11-15

標籤如何 webpack 打包 umd 模塊測試結果简体版

原文原文鏈接

對於 JavaScript 的模塊而言, webpack 能夠用來build 基於瀏覽器或服務端的包.html

下面讓咱們學習如何使用webpack生成UMD.node

首先須要全局安裝webpackwebpack

npm install -g webpackgit

讓咱們先來建立一個用來返回兩數之和的加法模塊.github

// 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你的模塊.web

$ 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包是否正確了.ajax

CommonJS

在測試以前,須要肯定是否安裝成功Nodejs環境,npm

當你使用webpack打包的程序中包含了調用Window的內容時(好比操做dom啥的),須要將commonJS轉換成瀏覽器可識別的代碼.這一步有不少方法,就我而言,我推薦你使用browserify,
它的logo賊好看,讓我有種在寫咒語的感受.api

並且也很好用,你只要在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

感謝他救我於水火之中