成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

如何用webpack打包umd模塊并測(cè)試打包結(jié)果

guqiu / 2051人閱讀

摘要：對(duì)于的模塊而言可以用來(lái)基于瀏覽器或服務(wù)端的包下面讓我們學(xué)習(xí)如何使用生成首先需要全局安裝讓我們先來(lái)創(chuàng)建一個(gè)用來(lái)返回兩數(shù)之和的加法模塊接下來(lái)我們來(lái)建立配置接下來(lái)使用來(lái)你的模塊現(xiàn)在你可以來(lái)使用這三種不同的方式來(lái)測(cè)試你的包是否正確了在測(cè)試之前需要

對(duì)于 JavaScript 的模塊而言, webpack 可以用來(lái)build 基于瀏覽器或服務(wù)端的包.

下面讓我們學(xué)習(xí)如何使用webpack生成UMD.

首先需要全局安裝webpack

npm install -g webpack

讓我們先來(lái)創(chuàng)建一個(gè)用來(lái)返回兩數(shù)之和的加法模塊.

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

接下來(lái),我們來(lái)建立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"
  }
};

接下來(lái)使用webpack來(lái)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

現(xiàn)在你可以來(lái)使用CommonJS, AMD, script tag這三種不同的方式來(lái)測(cè)試你的UMD包是否正確了.

CommonJS

在測(cè)試之前,需要確定是否安裝成功Nodejs環(huán)境,

當(dāng)你使用webpack打包的程序中包含了調(diào)用Window的內(nèi)容時(shí)(比如操作dom啥的),需要將commonJS轉(zhuǎn)換成瀏覽器可識(shí)別的代碼.這一步有很多方法,就我而言,我推薦你使用browserify,
它的logo賊好看,讓我有種在寫咒語(yǔ)的感覺(jué).

而且也很好用,你只要在terminal下輸入 browserify 想要轉(zhuǎn)換的文件 > 生成文件,就可以生成可以在瀏覽器環(huán)境下使用的js啦.

如果你不想詳細(xì)測(cè)試,也不想裝browserify,還有一種偷懶的辦法可以不完整的測(cè)試你的代碼, 在nodejs環(huán)境下定義 global.window = {};,代碼應(yīng)該也可以運(yùn)行.

$ node

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

AMD模塊需要一個(gè)requirejs模塊,我這里采用的是在cdn上引用,你也可以把它下載下來(lái),自己引入試一下.需要注意的是,如果自己引用的話,需要注意文件路徑.

下載鏈接在這里

AMD (中文版)
Script Tag

這個(gè)就是最簡(jiǎn)單的全局暴露,沒(méi)啥好說(shuō)的.

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

感謝他救我于水火之中

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/101981.html

相關(guān)文章

  • 基于 Gulp + Browserify 構(gòu)建 ES6 環(huán)境下的自動(dòng)化前端項(xiàng)目

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

    yuanxin 評(píng)論0 收藏0

  • webpack組織模塊的原理 - 打包Library

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

    legendmohe 評(píng)論0 收藏0

  • 嘗試造了個(gè)工具類庫(kù)，名為 Diana

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

    zhichangterry 評(píng)論0 收藏0

  • [譯] 用 ES6 構(gòu)建新一代可復(fù)用 JS 模塊

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

    phpmatt 評(píng)論0 收藏0

  • Vue源碼之目錄結(jié)構(gòu)

    摘要：運(yùn)行時(shí)用來(lái)創(chuàng)建實(shí)例渲染并處理虛擬等的代碼?；旧暇褪浅ゾ幾g器的其它一切。版本可以通過(guò)標(biāo)簽直接用在瀏覽器中。為這些打包工具提供的默認(rèn)文件是只有運(yùn)行時(shí)的構(gòu)建。為瀏覽器提供的用于在現(xiàn)代瀏覽器中通過(guò)直接導(dǎo)入。 Vue版本：2.6.9 源碼結(jié)構(gòu)圖 ├─ .circleci // 包含CircleCI持續(xù)集成/持續(xù)部署工具的配置文件 ├─ .github ...

    freewolf 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

guqiu

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<