vue中的imports-loader

imports-loader

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