js import和require用法的区别

写个简单js文件，假设名字为：lib.js 。 假设内容如下：

export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}
 
 
1
2
3
4
5
6
7
 
 
1
2
3
4
5
6
7

这样就可以在其他地方对lib中定义的属性和方法进行引用，引用方法有两种，也就时import和require。

//方法一
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3));
//方法二
import * as lib from 'lib';
square = lib.square;
 
 
1
2
3
4
5
6
7
 
 
1
2
3
4
5
6
7

还可以设置默认的导出信息，就需要崽lib.js中定义 export default {}。default后面可以接一个参数，也可以接一个数组。书写方法为：

 //------ module1.js ------
export default 123;

//------ module2.js ------
const D = 123;
export { D as default };
 
 
1
2
3
4
5
6
 
 
1
2
3
4
5
6

通常比较习惯用第一种。然后用import就可以得到这个数组或则参数。但是import只能用于静态导入，就是必须在文件开始的时候，在最上层就写好。而require就可以实现动态加载。require是AMD规范的框架，import是nodeJS的一种语法。在vue里面使用import和require其实是没有区别的（Webpack1），因为最后都会转成require。

加载方式	规范	命令	特点
运行时加载	CommonJS/AMD	require	社区方案，提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量，无法进行静态优化。
编译时加载	ESMAScript6+	import	语言规格层面支持模块功能。支持编译时静态分析，便于JS引入宏和类型检验。动态绑定。

const incrementCounter = function ({dispatch,state}){
    dispatch(‘INCREMENT‘)
}
export default {
    incrementCounter
}
//require
let myAction = require(‘xxxxx‘);
myAction.default.incrementCounter()


 
 

  
  

   
   
require/exports 的用法只有以下三种简单的写法：
   
   

    
    
const fs = require('fs')
exports.fs = fs
module.exports = fs


    
    


    
    
而 import/export 的写法就多种多样：

    
    


     
     
import fs from 'fs'
import {default as fs} from 'fs'
import * as fs from 'fs'
import {readFile} from 'fs'
import {readFile as read} from 'fs'
import fs, {readFile} from 'fs'

export default fs
export const fs
export function readFile
export {readFile, read}
export * from 'fs'

    
    

    
    


    
    


    
    


     
     


      
      
形式上看起来五花八门，但本质上：

      
      
CommonJS 还是 ES6 Module 输出都可以看成是一个具备多个属性或者方法的对象；
default 是 ES6 Module 所独有的关键字，export default fs 输出默认的接口对象，import fs from 'fs' 可直接导入这个对象；
ES6 Module 中导入模块的属性或者方法是强绑定的，包括基础类型；而 CommonJS 则是普通的值传递或者引用传递。 
        
 
         
 
         
 
          
 
            
           
1、2 相对比较好理解，3 需要看个例子：
 
           
 
            
// counter.js
exports.count = 0
setTimeout(function () {
  console.log('increase count to', exports.count++, 'in counter.js after 500ms')
}, 500)

// commonjs.js
const {count} = require('./counter')
setTimeout(function () {
  console.log('read count after 1000ms in commonjs is', count)
}, 1000)

//es6.js
import {count} from './counter'
setTimeout(function () {
  console.log('read count after 1000ms in es6 is', count)
}, 1000)
 
           
 
           
分别运行 commonjs.js 和 es6.js：
 
           
 
            
➜  test node commonjs.js
increase count to 1 in counter.js after 500ms
read count after 1000ms in commonjs is 0
➜  test babel-node es6.js
increase count to 1 in counter.js after 500ms
read count after 1000ms in es6 is 1