在fastclick中遇到的坑

在基于vue-cli脚手架搭建好的项目中，在main.js中引入fastclick.js，代码如下：

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import test from './config/rem'import FastClick from './plugins/fastclick.js'console.log(test);console.log(FastClick);if ('addEventListener' in document) {  document.addEventListener('DOMContentLoaded', function() {    FastClick.attach(document.body);  }, false);}Vue.config.productionTip = false/* eslint-disable no-new */new Vue({  el: '#app',  router,  template: '<App/>',  components: { App }})

结果报错：Fastclcik是undefined控制台报错：

排除了fastclick文件引入失败的问题，test能正常打印

然后换require引入

代码：

import router from './router'import'./config/rem'require('./plugins/fastclick.js')console.log(FastClick);if ('addEventListener' in document) {  document.addEventListener('DOMContentLoaded', function() {    FastClick.attach(document.body);  }, false);}

控制台输出：

问题解决，但是有点不明白这是为什么，然后默默去访问了下度娘，看到一篇博客对require与import是这样解释的：

require的使用非常简单，它相当于module.exports的传送门，module.exports后面的内容是什么，require的结果就是什么，对象、数字、字符串、函数……再把require的结果赋值给某个变量，相当于把require和module.exports进行平行空间的位置重叠。

而且require理论上可以运用在代码的任何地方，甚至不需要赋值给某个变量之后再使用，比如：

require('./a')();// a模块是一个函数，立即执行a模块函数var data = require('./a').data;// a模块导出的是一个对象var a = require('./a')[0];// a模块导出的是一个数组

你在使用时，完全可以忽略模块化这个概念来使用require，仅仅把它当做一个node内置的全局函数，它的参数甚至可以是表达式：

require(process.cwd() + '/a');

但是import则不同，它是编译时的（require是运行时的），它必须放在文件开头，而且使用格式也是确定的，不容置疑。它不会将整个模块运行后赋值给某个变量，而是只选择import的接口进行编译，这样在性能上比require好很多。

看到这里我的理解是require引入时立即执行了fastclcik.js而import并没有

博文地址：http://www.cnblogs.com/guanghe/p/6560698.html  有兴趣的可以去看看