js模块化系统--笔记1

1问：require、import、export、exports、export default、module.exports这几个概念的主要区别？

答：js模块化有两套标准，一套是CommonJS模块化，另一套是ES6模块化。二者各自实现了模块化。node采用了commonjs标准，webpack打包的是commonJS规范下的js文件。CommonJS认为每个文件就是一个模块，并为每个模块提供了module和exports两个对象，使用require进行导入，是为服务器端开发设计的。ES6使用export关键字进行导出，import进行导入。

 注意：exports对象使用的是module.exports的引用，require导入的是module.exports对象内容，所以不要切断二者的引用关系，除非你有必须这么做的理由。

2问require文件加载机制和import的加载机制。

答：就require而言，分为全名方式引入和忽略后缀名方式引入，其中又包含带‘/’或'.'或'..'的情况。但凡带啥都不带，就一个完整的带后缀的文件名，就意味着是内置模块文件，否则就是第三方或者你自己写的模块文件。不带后缀名的，比较复杂，有一套加载流程，分别尝试文件后缀为 .js或 .json或.node(c/c++编写的模块）的情况，如果这些文件都不存在，则看作一个文件夹即进到里面查找package.json这个文件,然后查找package.json文件里的main键值对应的值，若有这个文件，则加载，没有则尝试加载index.js文件，若还没有则报异常。

        对import而言，也是分为全名引入和忽略后缀引入的方式。全名引入和上面类似，属于精准引入。忽略后缀的方式，主要是配合webpack工具，通过配置webpack.base.conf.js中的extensions

 可以实现省略后缀，但注意，.json依然不能省略。若js和vue文件都不存在，则视为目录，到里面去找package.json文件，若存在则找main字段，若main指定的js文件不存在，则尝试加载index.js，若还没有则取index.vue,若还没有，则报异常。

 

3问：export与export default的区别？

答：对外暴露的元素，也就是允许其他文件通过import方式导入的元素。 

注意：export与export default均可用于导出常量、函数、文件、模块等。在一个文件或模块中，export 、import可以有多个，export default仅有一个。export能直接导出变量表达式，export default不行。

4问： 以上两种方式的区别？

答：通过export方式导出，在导入时要加{ }，export default则不需要。即区别在于是否是默认的导出。

注意：在这种不使用{ }来引用模块的情况下，import模块时的命名是随意的。 在使用{ 元素A }时只有在被导入的模块中有命名为A元素的export name的代码才有效。可以通过as实现重命名。

5问：默认导出元素能否通过{}的形式进行导入？

答：不行。。

只能通过各自独立的方式获取。