webpack中imports-loader,exports-loader,expose-loade

why_rookie 发布于2019-08-20 12:20 / 1378人阅读

摘要：有几个和模块化相关的，，比较容易混淆。注意，我们并没有引入。所以运行的结果是。同时，我们指定了变量。等于是在文件的最顶上，加上了。实际情况大致如此。把一个模块导出并付给一个全局变量。假如中有代码，那么后的值就为我们这里只讨论浏览器环境。

Webpack有几个和模块化相关的loader，imports-loader,exports-loader,expose-loader，比较容易混淆。今天，我们来理一理。

imports-loaders

文档介绍的是：用于向一个模块的作用域内注入变量（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-loader

exports有导出的意思，这让我们猜测它有从模块中导出变量的功能。实际情况大致如此。我们来看个小例子。
例子的完整代码在这里
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，所以我们才能正确的导入。

expose-loader

把一个模块导出并付给一个全局变量。文档里给了一个例子：

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（我们这里只讨论浏览器环境）。
我这里还有一个稍稍复杂点的从一个umd模块的文件里导出到全局变量的例子，有兴趣的同学点击这里。

云服务器超融合服务器 webpack _webpack webpack cdn webpack2

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80928.html

webpack shimmimg

摘要：解决方案就是，将前置插入到插件中。语法加载器查询值含义模块别名命名使用，其它变量命名定义，使用语法。多个值禁用有很多模块在使用前会进行函数的检查。注意模块必须在你的中被过，否则他们将不会被暴露。主要用于导出模块。模块的shim其实在webpack中可以使用imports-loader和exports-loader来完成。 1.imports-loader 顾名思义，导入模块的处理器。...

googollee 2019-08-20 15:53 评论0 收藏0
webpack多页应用架构系列（四）：老式jQuery插件还不能丢，怎么兼容？

摘要：本文首发于的技术博客实用至上，非经作者同意，请勿转载。怎么来兼容老式插件呢方法有不少，下面一个一个来看。与上述的方案相反，此方案是先用加载的满足老式插件的需要，再通过将其转换成符合模块化要求的。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000006887523如果您对本系列文...

Chao 2019-08-22 10:38 评论0 收藏0
threeJs模块化开发解决方案 import-three-examples

摘要：最近的老项目要迁移到已有的后台中，但发现的插件的包真少，老项目中每引一个插件就得专门去修改文件中的干脆写了一个插件使中的所有的第三方库都能正常引入废话不多说了直接上使用方法了需要的依赖的配置渲染进程的其他第三最近three的老项目要迁移到已有的vue后台中，但发现threeJs的插件npm的包真少，老项目中每引一个插件就得专门去修改文件中的import exports. So,干脆写...

tinyq 2019-08-23 14:26 评论0 收藏0
webpack 巧解环境配置问题

摘要：项目的开发和测试和生产环境一般都不是同一个，有时候就会产生需要前端项目需要根据不同的环境进行不同的配置的情况。比较经典的情况就是后端的接口的问题。当前也不要忘记了和上面一样设置一下环境变量哦其它当然像这个问题的回答中直接使用也是可以的。项目的开发和测试和生产环境一般都不是同一个，有时候就会产生需要前端项目需要根据不同的环境进行不同的配置的情况。比较经典的情况就是后端的接口 hostn...

siberiawolf 2019-08-19 17:07 评论0 收藏0