import和require的摸索

　　这两个东西多是用来引入文件的，本来还是没有想过什么区别，这次遇到了，所以浅谈下；　　

　　之前在写一套公司的vue的组件库，移动端的，样式是参照了miutui和微信的ui，然后期间确实是有踩到了一些坑；写一套自己的组件ui是因为公司的项目之前在用其他组件库的时候，会碰到有的地方需要这个，然后引入一堆，这样就有了冗余的代码，为了项目中没有不必要的东西，就有了写一套自己的ui的需求。

　　在做toast组件和dialog组件之类的时候还是和其他一般的组件不一样的，因为这几个组件是本来不存在的，要通过函数形式来调用的。这就需要涉及到在页面中创建出来，然后再消失；

const ToastConstructor = Vue.extend(require('./alert.vue').default)

const ToastConstructor = Vue.extend(require('./alert.vue'))

　　上面两段代码的意图就是用vue.extend()创建alert实例，区别是一个引入的是require中的default，另一个是require的内容,这个地方困扰了我很久，因为本来require是可以的，网上找了相关的已经写过的toast组件，也是用的是requre，但是写的时候就是不行，然后换了中方式，

import alertComponent from './alert.vue'

let alertConstructor = Vue.extend(alertComponent)

这样，先用import进来，然后再extend来创建实例，就成功了，然后打印了require进来的和import的两个东西，发现了default，这才误打误撞的解决了；不过这其中可能还和webpack的版本也有关系

　　其实仔细了解之后，知道他俩其实都是js的规范，只不过是两种不同的规范而已，import是es6的规范，而require是commonjs的规范（node），require是在运行时加载的，而import是在编译时候加载的。在没有ES6标准发布之前，一般在node中采用的是commonjs规范，使用require引入模块，然后使用module.export导出接口，但是在ES6标准发布之后，module成为了标准，标准的使用是以export指令导出接口，以import引入模块。在之后的编程中，代码规范的统一，主张我们使用import来进行模块的导入。编程中模块的思想让js大规模工程成为可能，模块化编程越来越流行，成为了项目的主流。