資訊專欄INFORMATION COLUMN
摘要：有幾個和模塊化相關的，，比較容易混淆。注意，我們并沒有引入。所以運行的結果是。同時，我們指定了變量。等于是在文件的最頂上，加上了。實際情況大致如此。把一個模塊導出并付給一個全局變量。假如中有代碼，那么后的值就為我們這里只討論瀏覽器環(huán)境。
Webpack有幾個和模塊化相關的loader，imports-loader,exports-loader,expose-loader，比較容易混淆。今天，我們來理一理。
imports-loaders文檔介紹的是：用于向一個模塊的作用域內(nèi)注入變量（Can be used to inject variables into the scope of a module.）,官方的文檔總是言簡意賅但是不太好懂。我們來舉個例子。
例子完整的代碼可以點這里
jqGreen.js文件里僅一行代碼
//沒有模塊化
$("#box").css("color","green");
index.js文件也只有一行代碼
require("./jqGreen");
我們的配置文件中，是把index.js作為入口文件的。
{
entry:{
index:"./src/js/index.js"
}
}
注意，我們并沒有引入jquery。所以運行的結果是$ is not defined。
但是如果我們稍微修改一下jqGreen的引入方式，就能很輕松的解決這個問題。
index.js文件
require("imports?$=jquery!./jqGreen");
當然，這個能運行之前，我們要npm install imports-loader一下。上面代碼，把變量$注入進模塊jqGreen.js。同時，我們指定了變量$=jquery。等于是在jqGreen.js文件的最頂上，加上了var $=require("jquery")。這樣，程序就不會報$ is not defined的錯誤了。
exports-loaderexports有導出的意思，這讓我們猜測它有從模塊中導出變量的功能。實際情況大致如此。我們來看個小例子。
例子的完整代碼在 這里
Hello.js文件中僅有一個方法，直接綁定在全局變量window上面。
window.Hello = function(){
console.log("say hello.");
}
然后我們在index.js文件里去引用這個Hello.js:var hello = require("./Hello.js");。這樣引用的結果是變量hello是undefined。因為我們在Hello.js文件里沒有寫module.exports=window.Hello，所以index.js里我們require的結果就是undefined。這個時候，exports-loader就派上用場了。我們只用把index.js的代碼稍微改動一下：var hello = require("exports?window.Hello!./Hello.js");，這個時候，代碼就能正確的運行了。變量hello就是我們定義的window.hello啦。
var hello = require("exports?window.Hello!./Hello.js");這行代碼，等于在Hello.js里加上一句module.exports=window.Hello，所以我們才能正確的導入。
把一個模塊導出并付給一個全局變量。文檔里給了一個例子：
require("expose?libraryName!./file.js");
// Exposes the exports for file.js to the global context on property "libraryName".
// In web browsers, window.libraryName is then available.
例子中的注釋是說把file.js中exports出來的變量付給全局變量"libraryName"。假如file.js中有代碼module.exports=1，那么require("expose?libraryName!./file.js")后window.libraryName的值就為1（我們這里只討論瀏覽器環(huán)境）。
我這里還有一個稍稍復雜點的從一個umd模塊的文件里導出到全局變量的例子，有興趣的同學點擊這里。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/80928.html
摘要：解決方案就是，將前置插入到插件中。語法加載器查詢值含義模塊別名命名使用，其它變量命名定義，使用語法。多個值禁用有很多模塊在使用前會進行函數(shù)的檢查。注意模塊必須在你的中被過，否則他們將不會被暴露。主要用于導出模塊。 模塊的shim其實在webpack中可以使用imports-loader和exports-loader來完成。 1.imports-loader 顧名思義，導入模塊的處理器。...
摘要：本文首發(fā)于的技術博客實用至上，非經(jīng)作者同意，請勿轉載。怎么來兼容老式插件呢方法有不少，下面一個一個來看。與上述的方案相反，此方案是先用加載的滿足老式插件的需要，再通過將其轉換成符合模塊化要求的。 本文首發(fā)于Array_Huang的技術博客——實用至上，非經(jīng)作者同意，請勿轉載。原文地址：https://segmentfault.com/a/1190000006887523如果您對本系列文...
摘要：最近的老項目要遷移到已有的后臺中，但發(fā)現(xiàn)的插件的包真少，老項目中每引一個插件就得專門去修改文件中的干脆寫了一個插件使中的所有的第三方庫都能正常引入廢話不多說了直接上使用方法了需要的依賴的配置渲染進程的其他第三 最近three的老項目要遷移到已有的vue后臺中，但發(fā)現(xiàn)threeJs的插件npm的包真少，老項目中每引一個插件就得專門去修改文件中的import exports. So,干脆寫...
摘要：項目的開發(fā)和測試和生產(chǎn)環(huán)境一般都不是同一個，有時候就會產(chǎn)生需要前端項目需要根據(jù)不同的環(huán)境進行不同的配置的情況。比較經(jīng)典的情況就是后端的接口的問題。當前也不要忘記了和上面一樣設置一下環(huán)境變量哦其它當然像這個問題的回答中直接使用也是可以的。 項目的開發(fā)和測試和生產(chǎn)環(huán)境一般都不是同一個，有時候就會產(chǎn)生需要前端項目需要根據(jù)不同的環(huán)境進行不同的配置的情況。比較經(jīng)典的情況就是后端的接口 hostn...
閱讀 2847·2021-11-19 11:30
閱讀 3112·2021-11-15 11:39
閱讀 1886·2021-08-03 14:03
閱讀 2061·2019-08-30 14:18
閱讀 2112·2019-08-30 11:16
閱讀 2270·2019-08-29 17:23
閱讀 2663·2019-08-28 18:06
閱讀 2599·2019-08-26 12:22
