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

guqiu 發布于2019-08-23 15:23 / 1958人閱讀

摘要：對于的模塊而言可以用來基于瀏覽器或服務端的包下面讓我們學習如何使用生成首先需要全局安裝讓我們先來創建一個用來返回兩數之和的加法模塊接下來我們來建立配置接下來使用來你的模塊現在你可以來使用這三種不同的方式來測試你的包是否正確了在測試之前需要

對于 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 (中文版)

Script Tag

這個就是最簡單的全局暴露,沒啥好說的.

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

感謝他救我于水火之中

GPU云服務器云服務器 Webpack打包分塊軟件打包在線打包打包部署

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101981.html

基于 Gulp + Browserify 構建 ES6 環境下的自動化前端項目

摘要：本文特此給大家介紹下如何使用配合來構建基于的前端項目。最后，在目錄下會生成最終的項目文件。執行單元測試本例中使用進行單元測試。隨著React、Angular2、Redux等前沿的前端框架越來越流行，使用webpack、gulp等工具構建前端自動化項目也隨之變得越來越重要。鑒于目前業界普遍更流行使用webpack來構建es6(ECMAScript 2015)前端項目，網上的相關教程也比...

yuanxin 2019-08-19 18:05 評論0 收藏0
webpack組織模塊的原理 - 打包Library

摘要：所以你編譯后的文件實際上應當只輸出，這就需要在配置里用來控制這樣上面的模塊加載函數會在返回值后面加一個，這樣就只返回的部分。之前一篇文章分析了Webpack打包JS模塊的基本原理，所介紹的案例是最常見的一種情況，即多個JS模塊和一個入口模塊，打包成一個bundle文件，可以直接被瀏覽器或者其它JavaScript引擎執行，相當于直接編譯生成一個完整的可執行的文件。不過還有一種很常見的...

legendmohe 2019-08-22 15:15 評論0 收藏0
嘗試造了個工具類庫，名為 Diana

摘要：的另一種形式測試踩坑之路代碼覆蓋率單元測試的代碼覆蓋率統計，是衡量測試用例好壞的一個的方法。 showImg(https://segmentfault.com/img/remote/1460000012564211?w=640&h=280); 項目地址: diana文檔地址: http://muyunyun.cn/diana/ 造輪子的意義為啥已經有如此多的前端工具類庫還要自己造輪...

zhichangterry 2019-08-21 18:22 評論0 收藏0
[譯] 用 ES6 構建新一代可復用 JS 模塊

摘要：我們已經運用了的一些閃亮的新特性，那么如何才能轉化為的代碼呢首先，我們需要通過來安裝在全局安裝會提供我們一個命令行工具。你是不是也在為可以使用ES6的新特性而興奮，卻不太確定應該從哪開始，或者如何開始？不止你一個人這樣！我已經花了一年半的時間去解決這個幸福的難題。在這段時間里 JavaScript 工具鏈中有幾個令人興奮的突破。這些突破讓我們可以用ES6書寫完全的JS模塊，而不會為...

phpmatt 2019-08-19 17:35 評論0 收藏0
Vue源碼之目錄結構

摘要：運行時用來創建實例渲染并處理虛擬等的代碼。基本上就是除去編譯器的其它一切。版本可以通過標簽直接用在瀏覽器中。為這些打包工具提供的默認文件是只有運行時的構建。為瀏覽器提供的用于在現代瀏覽器中通過直接導入。 Vue版本：2.6.9 源碼結構圖 ├─ .circleci // 包含CircleCI持續集成/持續部署工具的配置文件 ├─ .github ...

freewolf 2019-08-23 16:22 評論0 收藏0