node/webpack全局变量污染控制

模块化的好处之一就是防止全局变量的污染,传统方法的引入javascript文件有一些局限性
比如

1/无法立即体现，脚本的执行依赖于外部扩展库(external library)。
2/如果依赖不存在，或者引入顺序错误，应用程序将无法正常运行。
3/如果依赖被引入但是并没有使用，浏览器将被迫下载无用代码。

假设a,b两个文件存在依赖关系，b依赖于a,如果在a 文件之前存在与a文件的全局变量一样的变量名，则会导致全局变量污染，比如

//index.html
<script type="text/javascript">
var $ = '$';
</script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!--那么$='$'这个变量就会被jquery的$变量名覆盖掉。-->

而当我们以模块的方式导入，webpack会帮我们去解析这些代码以便与让还不支持ES6的浏览器也能识别代码，比如

//xx.js,在index.html文件存在全局变量$='$'的情况下,我们在b.js中引入a.js【此处为jquery，需要通过npm/cnpm install jquery --save 安装到本地】
import $ from 'jquery';
$('div').append('JQERY');//此处的 $就是jq对象,通过import引入，只在该文件有效，同时，在index.html文件中的$变量也能正常使用。