資訊專欄INFORMATION COLUMN
摘要：對于的模塊而言可以用來基于瀏覽器或服務(wù)端的包下面讓我們學(xué)習(xí)如何使用生成首先需要全局安裝讓我們先來創(chuàng)建一個用來返回兩數(shù)之和的加法模塊接下來我們來建立配置接下來使用來你的模塊現(xiàn)在你可以來使用這三種不同的方式來測試你的包是否正確了在測試之前需要
對于 JavaScript 的模塊而言, webpack 可以用來build 基于瀏覽器或服務(wù)端的包.
下面讓我們學(xué)習(xí)如何使用webpack生成UMD.
首先需要全局安裝webpack
npm install -g webpack
讓我們先來創(chuàng)建一個用來返回兩數(shù)之和的加法模塊.
// 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
現(xiàn)在你可以來使用CommonJS, AMD, script tag這三種不同的方式來測試你的UMD包是否正確了.
CommonJS在測試之前,需要確定是否安裝成功Nodejs環(huán)境,
當(dāng)你使用webpack打包的程序中包含了調(diào)用Window的內(nèi)容時(比如操作dom啥的),需要將commonJS轉(zhuǎn)換成瀏覽器可識別的代碼.這一步有很多方法,就我而言,我推薦你使用browserify,
它的logo賊好看,讓我有種在寫咒語的感覺.
而且也很好用,你只要在terminal下輸入 browserify 想要轉(zhuǎn)換的文件 > 生成文件,就可以生成可以在瀏覽器環(huán)境下使用的js啦.
如果你不想詳細(xì)測試,也不想裝browserify,還有一種偷懶的辦法可以不完整的測試你的代碼, 在nodejs環(huán)境下定義 global.window = {};,代碼應(yīng)該也可以運(yùn)行.
$ node
> var add = require("./dist/add");
> add(1, 2);
AMD
AMD模塊需要一個requirejs模塊,我這里采用的是在cdn上引用,你也可以把它下載下來,自己引入試一下.需要注意的是,如果自己引用的話,需要注意文件路徑.
下載鏈接在這里
AMD (中文版)
Script Tag
這個就是最簡單的全局暴露,沒啥好說的.
本文參考了Build to UMD with webpack@1
感謝他救我于水火之中
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/101981.html
摘要：本文特此給大家介紹下如何使用配合來構(gòu)建基于的前端項目。最后，在目錄下會生成最終的項目文件。執(zhí)行單元測試本例中使用進(jìn)行單元測試。 隨著React、Angular2、Redux等前沿的前端框架越來越流行，使用webpack、gulp等工具構(gòu)建前端自動化項目也隨之變得越來越重要。鑒于目前業(yè)界普遍更流行使用webpack來構(gòu)建es6(ECMAScript 2015)前端項目，網(wǎng)上的相關(guān)教程也比...
摘要：所以你編譯后的文件實際上應(yīng)當(dāng)只輸出，這就需要在配置里用來控制這樣上面的模塊加載函數(shù)會在返回值后面加一個，這樣就只返回的部分。 之前一篇文章分析了Webpack打包JS模塊的基本原理，所介紹的案例是最常見的一種情況，即多個JS模塊和一個入口模塊，打包成一個bundle文件，可以直接被瀏覽器或者其它JavaScript引擎執(zhí)行，相當(dāng)于直接編譯生成一個完整的可執(zhí)行的文件。不過還有一種很常見的...
摘要：的另一種形式測試踩坑之路代碼覆蓋率單元測試的代碼覆蓋率統(tǒng)計，是衡量測試用例好壞的一個的方法。 showImg(https://segmentfault.com/img/remote/1460000012564211?w=640&h=280); 項目地址: diana文檔地址: http://muyunyun.cn/diana/ 造輪子的意義 為啥已經(jīng)有如此多的前端工具類庫還要自己造輪...
摘要：我們已經(jīng)運(yùn)用了的一些閃亮的新特性，那么如何才能轉(zhuǎn)化為的代碼呢首先，我們需要通過來安裝在全局安裝會提供我們一個命令行工具。 你是不是也在為可以使用ES6的新特性而興奮，卻不太確定應(yīng)該從哪開始，或者如何開始？不止你一個人這樣！我已經(jīng)花了一年半的時間去解決這個幸福的難題。在這段時間里 JavaScript 工具鏈中有幾個令人興奮的突破。 這些突破讓我們可以用ES6書寫完全的JS模塊，而不會為...
摘要：運(yùn)行時用來創(chuàng)建實例渲染并處理虛擬等的代碼。基本上就是除去編譯器的其它一切。版本可以通過標(biāo)簽直接用在瀏覽器中。為這些打包工具提供的默認(rèn)文件是只有運(yùn)行時的構(gòu)建。為瀏覽器提供的用于在現(xiàn)代瀏覽器中通過直接導(dǎo)入。 Vue版本：2.6.9 源碼結(jié)構(gòu)圖 ├─ .circleci // 包含CircleCI持續(xù)集成/持續(xù)部署工具的配置文件 ├─ .github ...
閱讀 2576·2021-11-23 09:51
閱讀 3124·2019-08-30 15:54
閱讀 1077·2019-08-30 14:14
閱讀 3549·2019-08-30 13:59
閱讀 1406·2019-08-29 17:09
閱讀 1470·2019-08-29 16:24
閱讀 2852·2019-08-29 15:43
閱讀 916·2019-08-29 12:45
