webpack中imports-loader,exports-loader,expose-loader的区别

悠悠 2023-06-30 08:59 4阅读 0赞

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

# imports-loaders #

文档介绍的是：用于向一个模块的作用域内注入变量（Can be used to inject variables into the scope of a module.）,官方的文档总是言简意赅但是不太好懂。我们来举个例子。  
例子完整的代码可以[点这里][Link 1]  
`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有`导出`的意思，这让我们猜测它有从模块中导出变量的功能。实际情况大致如此。我们来看个小例子。  
例子的完整代码在 [这里][Link 2]  
`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模块的文件里导出到全局变量的例子，有兴趣的同学点击[这里][Link 3]。

[Link 1]: https://github.com/a932455223/webpackDemo/tree/master/importsDemo
[Link 2]: https://github.com/a932455223/webpackDemo/tree/master/exportsDemo
[Link 3]: https://github.com/a932455223/webpackDemo/tree/master/exposeDemo